Vue中各组件的安装和卸载
前言
在我们刚使用vue时，会发现还是有些繁琐的，他会涉及很多的安装，比如vue、webpack、vue-cli、vue-router等。本章就针对这种情况，将涉及到的安装整理一下。
vue的安装
这里介绍几种方式。也可以看官网文档
使用<script>标签引用
- 直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。
开发版本：https://cn.vuejs.org/js/vue.js
生产版本：https://cn.vuejs.org/js/vue.min.js
在开发环境下不要使用压缩版本，不然你就失去了所有常见错误相关的警告! - CDN
对于制作原型或学习，你可以这样使用最新版本：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
使用NPM安装
在使用Vue构建大型项目时推荐使用NPM安装，它能够很好地于webpack等打包工具配合使用。同时 Vue 也提供配套工具来开发单文件组件。
安装代码如下：
npm install vue -g
这种方式安装的是最新稳定版。
-g :全局安装 --global
也可以指定版本：
npm install -g [email protected]
此处是使用的npm，说明几点。
1、不仅可以使用npm，还可以使用yarn
2、npm有时安装会出问题，此时我们可以使用cnpm镜像
3、npm全称node package manager,就是node的包依赖管理工具，因此它需要node环境。需要安装node，node的安装在本文有介绍。
命令行工具CLI
vue.js提供了命令行工具vue-cli，用于单文件富应用的构建。
下面我会详细记录这一块内容，此处先不赘述。
vue的卸载
此处仅记录npm卸载vue
npm uninstall vue-cli -g（3.0以下版本卸载）
npm uninstall -g @vue/cli（3.0以上版本卸载）
webpack的安装
安装webpack必须安装node.js，node.js自带了包管理工具npm（node packages manager）
简单说明一下他们的关系:webpack依赖于node.js环境，而node.js有很多的包依赖，它自带了一个包管理工具，就是npm。
此处不记录node的安装。可自行查阅文档安装。
全局安装
查看node的版本：
node -v
通过一下命令进行安装：
安装最新版本
npm install webpack -g
安装指定版本
npm install [email protected] -g
查看webpack的版本
npm webpack -v
本地安装
1、创建一个新的本地项目目录名为webpack-demo
mkdir webpack-demo
2、进入目录
cd webpack-demo
3、创建package.json文件
npm init -y
4、要安装最新版本或特定版本，请运行以下命令之一：
最新版本
npm install --save-dev webpack
指定版本
npm install --save-dev [email protected]
5、安装webpack-cli
npm install --save-dev webpack-cli
6、检查webpack是否安装成功
node_modules/.bin/webpack -v
webpack的卸载
一般webpack都会在全局和本地都安装一份，因此，需要将两处地方都卸载掉。我的卸载步骤如下：
卸载全局的webpack-cli(按理说是没有的，好像webpack-cli是没有全局的)
npm uninstall -g webpack-cli
卸载本地的webpack-cli:
npm uninstall webpack-cli
卸载全局的webpack:
npm uninstall -g webpack
卸载本地的webpack:
npm un webpack
注意：局部卸载需要进入所在文件夹后方能卸载。
vue-cli的安装
npm install -g @vue/cli
vue-cli的卸载
npm uninstall vue-cli -g（3.0以下版本卸载）
npm uninstall -g @vue/cli（3.0以上版本卸载）
vue-router的安装
可以通过官方网站进行学习：官方网站
直接下载 / CDN
v3.x: https://unpkg.com/vue-router/dist/vue-router.js
v4.x: https://unpkg.com/vue-router@4
Unpkg.com (opens new window)提供了基于 NPM 的 CDN 链接。上面的链接会一直指向在 NPM 发布的最新版本。你也可以像 https://unpkg.com/[email protected]/dist/vue-router.js 这样指定 版本号 或者 Tag。
在 Vue 后面加载 vue-router，它会自动安装的：
<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>
NPM
npm install vue-router
或者上为v3.x，下为v4.x
npm install vue-router@4
Vue CLI
如果你有一个正在使用 Vue CLI (opens new window)的项目，你可以以项目插件的形式添加 Vue Router。
vue add router
Node.js的安装
1、在官网下载需要的版本（推荐Recommended For Most Users）
2、安装下载文件。一直下一步，在选择安装位置处选择适当的位置即可。
安装成功，并在上面安装过程中已自动配置了环境变量和安装好了npm包，此时可以执行 node -v 和 npm -v 分别查看node和npm的版本号。
3、配置npm在安装全局模块时的路径和缓存cache的路径
因为在执行npm install webpack -g等命令全局安装的时候，默认会将模块安装在C:\Users\用户名\AppData\Roaming路径下的npm和npm_cache中，不方便管理且占用C盘空间。
- 所以这里配置自定义的全局模块安装目录，在node.js安装目录下新建两个文件夹 node_global和node_cache，然后在cmd命令下执行如下两个命令：
npm config set prefix "F:\Nodejs\node_global"
npm config set cache "F:\Nodejs\node_cache"
- 然后在环境变量 -> 系统变量中新建一个变量名为 “NODE_PATH”， 值为“F:\Nodejs\node_modules”
- 最后编辑用户变量里的Path，将相应npm的路径改为：F:\Nodejs\node_global
4、测试
通过安装webpack进行测试。执行如下代码。
npm install webpack -g
最后查看node_global和node_cache文件夹，里面已经有安装好的内容。搞定！
Node.js的卸载
1、在控制面板-程序和功能中卸载node.js
2、删除残留文件
C:\Users\DH\AppData\Roaming\npm
C:\Users\DH\AppData\Roaming\npm-cache
DH为我的电脑用户名
参考文档
https://blog.csdn.net/antma/article/details/86104068