Vue框架学习笔记——Vue框架的安装

谁借莪１个温暖的怀抱￠ 2024-02-18 12:32 27阅读 0赞

#### 文章目录 ####

*  摘要
 *  下载生产版本的Vue.js
 *  消除第一个警告，安装开发者工具
 *  消除第二个警告
 *   *  方法一：
     *  方法二：

--------------------

## 摘要 ##

本文主要介绍如何搭载vue的开发环境。通过下载vue的开发者版本，在通过下载开发者调试工具消除警告

## 下载生产版本的Vue.js ##

观看[vue2文档][vue2]，点击左侧的安装，点击生成版本下载（包含完整的警告和调试）.  
如果vue的代码编写完全后，项目搭建的时候，需要使用生产版本。

![d8b136b659184af7b3867a7f2a9f003f.png][]

然后将下载的生产版本的vue.js移动到项目的本地目录中，使用相对地址引用文件

当引入vue的时候，全局就多了一个Vue的构造函数  
可以在控制台中输入Vue验证是否引用成功

![27b00dc04c7345c8b2a81d65084f2786.png][]

## 消除第一个警告，安装开发者工具 ##

在浏览器的应用商店中安装vue的开发者工具可以消除第一个警告（要魔法）

如果安装后仍然无法消除，打开该拓展的详情，允许该拓展访问文件网址即可

![f59bdb71b3db4d17a5a6481460d6224d.png][]

## 消除第二个警告 ##

### 方法一： ###

在代码的body中添加代码：

### 方法二： ###

如果添加完，仍然有这个提示，可以打开vue.js中直接修改productionTip，将其改为false

![1ab561fa1b8f49fe8edd498a8ef7dafb.png][]

--------------------

至此，结束

[vue2]: https://v2.cn.vuejs.org/v2/guide/installation.html
[d8b136b659184af7b3867a7f2a9f003f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/256cb0dcc3cf47de9f22ef923dc5f727.png
[27b00dc04c7345c8b2a81d65084f2786.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/b64194e960ab4ae08408c5077162ec93.png
[f59bdb71b3db4d17a5a6481460d6224d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/6dd82904323d4acfb9d5e8afecda00a5.png
[1ab561fa1b8f49fe8edd498a8ef7dafb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/62f0496a384744abbcfbf8f5889a03c7.png