什么是Vue.js

Vue是一套用于构建用户界面的渐进式JavaScript框架。与其他大型框架不同的是，vue被设计为自底向上逐层应用。Vue的核心库只关注视图层。

Vue是典型的MVVM模型的框架。

Vue 不支持 IE8以下版本，因为Vue使用了IE8无法模拟的ECMAScript 5特性。

Vue环境配置

Vue安装

直接用<script>引入

1. 下载Vue对应的版本，通过<script>进行引入；
2. 不下载Vue对应的版本，通过CDN访问对应的vue版本地址，通过<script>进行引入；

引入方式大体如下：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

注：如果是下载对应版本的Vue，引入的话，把src中换成项目中对应的地址即可。

通过NPM安装

NPM是个什么鬼？

NPM其实就是NodeJS的包管理工具，能够解决NodeJS代码部署上的很多问题。常见的使用场景有以下几种：

• 通过NPM服务器下载别人编写好的第三方包到本地
• 通过NPM服务器下载并安装别人编写好的命令行程序到本地
• 将自己编写好的包或者命令行程序上传到NPM服务器供别人使用

这里废话了一堆，其实就是见到介绍一下npm，然后告诉你，要想用npm就电脑里需要有安装过NodeJS。

---

关于NPM常用的命令，后面补一篇专项的。

---

NodeJS安装步骤

1. 判断电脑里面有没有安装过NodeJS；

<!--简单粗暴，命令行看node的版本-->
node -d

2. 如果安装了，直接跳过以下步骤；
3. 打开NodeJS的官网，下载NodeJS的安装包,然后一通Next操作;
4. 再次使用步骤1里面的命令，查看版本号，如果出现版本号，说明安装正常，如果木有，那就是需要配置NodeJS的环境变量（windows的NodeJS安装过程中的Custom Setup里面有一个Add to Path默认是选中的，不修改的话，基本不需要配置环境变了，如果你想玩的话，自己找某度，搜索怎么配置环境变量）；

NPM安装Vue

NPM安装Vue一般有两种方式，其实是NPM安装就两种方式，一种是本地安装，一种是全局安装

本地安装Vue

• 把安装包放到npm命令所在的目录的/node_modules中，如果没有这个目录的话，会在执行npm命令时生成这个目录；
• 本地安装的包通过require()来引入本地安装的包；

本地安装命令如下（二选一即可）：

<!-- 本地安装 -->
npm install Vue
npm i Vue

全局安装Vue

• 将安装包放在 /usr/local 下或者你 node 的安装目录；
• 可以直接在命令行里使用；

全局安装命令如下（二选一即可）：

<!-- 全局安装 -->
npm install Vue -g
npm install -g Vue

注意：本地安装和全局安装，在命令上就区别在-g，而且-g可以写在Module Name的前面或者后面，实现的效果是一样的。

NPM删除安装包

不赘述了，有安装就有删除，额外送个删除的命令；

<!-- 全局删除 -->
npm uninstall -g <Module Name> 
npm uni -g <Module Name>
npm uninstall <Module Name> -g
npm uni <Module Name> -g
<!-- 本地删除 -->
npm uninstall <Module Name>
npm uni <Module Name>

通过脚手架安装使用

Vue提供了一个官方的CLI,即Vue-ClI，简单点聊就是通过npm安装Vue-CLI来使用Vue。

Vue-CLI简单介绍

Vue-CLI是前端常说的Vue脚手架，通过脚手架可以快速搭建一个网页项目。

• 通过 @vue/cli 实现的交互式的项目脚手架。
• 通过 @vue/cli +@vue/cli-service-global 实现的零配置原型开发。
• 一个运行时依赖(@vue/cli-service)，该依赖：
  • 可升级；
  • 基于webpack构建，并带有合理的默认配置；
  • 可以通过项目内的配置文件进行配置；
  • 可以通过插件进行扩展。
• 一个丰富的官方插件集合，集成了前端生态中- 最好的工具。
• 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

安装Vue-CLI

<!--安装Vue-CLI 3.0以前的版本-->
npm install -g vue-cli
<!--安装Vue-CLI 3.0以后（包含3.0）的版本-->
npm install -g @vue/cli

特别注意:

Vue-CLI以3.0为界限，包名是不同的，一个是 vue-cli ，一个是 @vue/cli 。

一般安装脚手架都是全局安装，它也不影响你不使用脚手架来进行实际开发。

安装指定版本的Vue-CLI

有些时候我们想安装制定版本的脚手架，所以我额外送几条npm命令。

<!--查看Vue脚手架在3.0之前的npm版本-->
npm view vue-cli versions --json
<!--查看Vue脚手架2.6.0版本-->
npm install -g vue-cli@2.6.0

<!--查看Vue脚手架在3.0之后的npm版本-->
npm view @vue/cli versions --json
<!--查看Vue脚手架3.6.0版本-->
npm install -g @vue/cli@3.6.0