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/vue@4.5.12"></script>

使用NPM安装
在使用Vue构建大型项目时推荐使用NPM安装，它能够很好地于webpack等打包工具配合使用。同时 Vue 也提供配套工具来开发单文件组件。
安装代码如下：

npm  install  vue  -g

这种方式安装的是最新稳定版。
-g :全局安装 --global
也可以指定版本：

npm install -g vue@4.5.12

此处是使用的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 webpack@5.37.1 -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 webpack@5.37.1

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/vue-router@2.0.0/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盘空间。

1. 所以这里配置自定义的全局模块安装目录，在node.js安装目录下新建两个文件夹 node_global和node_cache，然后在cmd命令下执行如下两个命令：

npm config set prefix "F:\Nodejs\node_global"
npm config set cache "F:\Nodejs\node_cache"

2. 然后在环境变量 -> 系统变量中新建一个变量名为 “NODE_PATH”， 值为“F:\Nodejs\node_modules”
3. 最后编辑用户变量里的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