在vue官网​​Vue.js

3.搭建Vue开发环境_vue.js

https://cn.vuejs.org/​​，点击学习->教程

3.搭建Vue开发环境_vue.js_02

 点击安装

3.搭建Vue开发环境_html5_03

 

3.搭建Vue开发环境_javascript_04

然后我们就可以下载对应的vue.js文件的开发版本和生产版本，生产版本去除了调试信息，所以体积相对更小

我们有两种安装vue的方式:

        1.就是使用<script>标签引入vue的js

        2.使用NPM去安装vue,如果选用这种方式去安装的话，往往都会配合命令行工具一起使用也就是脚手架

我们这里先使用<script>标签去实现一下

3.搭建Vue开发环境_html5_05

 我们可以看到这里有一个CDN，那么这个CDN是什么呢？

大家都知道我们在使用<script>标签的时候有个src属性，可以指定资源的位置，这个src我们可以使用本地文件，同样我们也可以使用http://形式的在线文件，那么为了让这个地址加载的更快，所以有的时候会做CDN的加速。

我们下载完可以发现很明显生产版本的经过了压缩

3.搭建Vue开发环境_javascript_06

 接下来开始学基础，我这里使用的工具是VsCode，大家可以自行下载安装

3.搭建Vue开发环境_javascript_07

我们引入Jquery的js文件之后，那么全局就会有$和jQuery这两个东西

那么同样的我们引入vue的js文件以后，全局也会出现Vue这个东西，我们可以叫它对象，也可以叫它函数。

因为函数本身就有两个身份，一个是函数，一个是对象

然后我们打开网页，f12查看，可以看到控制台输出两个小提示

3.搭建Vue开发环境_html_08

 这两个小提示我们后面再处理，接下来我们就验证一下是否有Vue这个构造函数

3.搭建Vue开发环境_javascript_09

 接下来我们就处理一下上面的两个警告

针对第一个，我们去应用商店搜索安装Vue的开发插件即可

3.搭建Vue开发环境_html_10

如果你安装完插件之后还有第一个错误则，需要开启该插件的无痕浏览和允许文件访问：

3.搭建Vue开发环境_html_11

 此时我们再看页面会发现，第一个提示已经消失了

3.搭建Vue开发环境_vue.js_12

 接下来我们看第二个，这是因为我们使用的是开发版本，如果我们不想让它提示，则可以看看vue的API

3.搭建Vue开发环境_开发版_13

3.搭建Vue开发环境_vue.js_14

 我们可以看到Vue.config是一个有全局配置的对象，一次修改，到处可用

而这里我们需要关注的是

3.搭建Vue开发环境_javascript_15

 

3.搭建Vue开发环境_javascript_16

所以我们在代码中去修改：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>

    
</head>
<body>
    <script>

        Vue.config.productionTip = false;

    </script>


</body>
</html>

这样两个提示就都消失了

至此我们就完成了3件事：

1.下载了开发版本的Vue

2.安装了Vue的开发者调试工具

3.关闭了控制台的两个提示