1.Vue 安装与简单使用

Hello，我是 Alex 007，一个热爱计算机编程和硬件设计的小白，为啥是007呢？因为叫 Alex 的人太多了，再加上每天007的生活，Alex 007就诞生了。

1.Vue的安装与简单使用

这篇文章我们来Vue的安装与简单使用。

Vue的使用方式呢有很多种，第一种方式就是直接使用<script>标签的方式去引入，第二种方式呢，大家可以使用Vue官方提供的CLI命令行工具，去快速的搭建比较复杂的脚手架。

作为初学者来讲呢，强烈建议大家先不使用命令行的方式去创建Vue的应用，那当我们对这个Vue有一定的了解和学习了之后，再去使用CLI的方式去创建Vue应用。

直接用 `<script>` 引入

下载

那在官方文档上的我们可以看到Vue为我们提供了两个版本，一个是开发版本，一个是生产版本，那顾名思义，开发的时候推荐大家使用开发版本，因为它包含完整的警告和调试信息，生产环境下推荐大家使用生产版本去替换开发时使用的开发版本，因为生产版本的话经过压缩会更小，而且删除了一些警告信息，点击开发版本或者是生产版本，我们可以下载并得到一个vue.js或vue.min.js这样的一个文件。

然后我们创建一个index.html文件，通过 <script> 引入vue.js：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript" src="vue.js"></script></body>
</html>

打开网页之后，并没有任何的内容，我们需要打开控制台，这时候如果我们在控制台里面可以看见两段提示，那就证明我们的vue.js已经成功地部署到项目里了。

CDN

CDN的本质是将媒体资源，动静态图片，HTML，CSS，JS等内容缓存到距离你更近的IDC，从而让用户进行共享资源，实现缩减站点间的响应时间等需求。

也就是说，我们不需要把vue.js下载到本地，可以直接使用网络上的资源，省去了下载这个步骤。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- <script type="text/javascript" src="vue.js"></script> --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></body>
</html>

同样可以看到两段提示信息：

对于生产环境，推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

NPM安装

在用Vue构建大型应用时推荐使用NPM安装，它能够很好的和webpack等模块打包器配合使用。

在使用NPM之前，我们要先安装Node.js，所谓的npm其实是Node.js的包管理工具。

去Node.js官网上下载最新的版本，目前最新版本是12.18.2.

下载好后，双击安装：

Next：

Accept，Next：

改一下安装路径，Next：

Next：

Next：

等待安装完成：

回车，继续，会帮助我们自动安装一些应用，比如Python。

Node.js安装完成，我们来验证一下，打开cmd，查看node版本：

同样可以查看NPM的安装版本：

此时NPM的本地仓库在C盘：

Node.js安装目录下两个文件夹：

执行以下两个命令：

npm config set cache "D:\Program Files\nodejs\node_cache"
npm config set prefix "D:\Program Files\nodejs\node_global"

如果有提示，可以通过以下命令升级npm：

npm install -g npm

为了提升速度，需要配置一个镜像站：

npm config set registry=http://registry.npm.taobao.org

检查配置是否成功：

npm config get registry

通过NPM安装Vue：

npm install vue -g

安装文件在如下目录：

通过npm安装的Vue新建项目：

vue init webpack npmVueProject

安装完成之后，可以通过命令行直接运行项目：

cd npmVueProject
npm run dev

打开浏览器，输入网址就可以看到Vue项目了：

项目文件：

到此为止，我们Vue的安装与简单使用就讲完了，接下来我们就进入正式的Vue学习。