Vue安装配置教程笔记

一、认识Vue

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 渐进式框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、响应式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以轻松搞定。

二、Vue安装

第一步：安装 Node.js 环境

访问 Node.js 官网：https://nodejs.org/en ，点击左侧的下载按钮，下载 Node.js LTS 版本的安装包。

**注意：**学习 Vue 3, 你需要安装 Node.js 16.0 版本或者更高, LTS 表示该安装包是一个被长期支持的版本，可以理解成是一个稳定版本。

下载完成后直接双击进行安装。

无脑点击下一步【Next】按钮即可，其中，需要勾选接受协议，以及自选选择安装路径。

第二步：验证是否安装成功

在cmd控制台输入node -v和npm -v（注意中间有个空格）验证是否安装成功。

node -v
npm -v
1
2

如果能够正确输出版本号，则表示 Vue 的环境搭建成功：

第三步：创建全局安装目录和缓存日志目录

说明：设置路径能够把通过npm安装的模块集中在一起，便于管理。

在nodejs安装的目录创建两个空文件夹：node_cache和node_global。

打开cmd窗口，执行如下命令，将npm的全局模块目录和缓存目录配置到我们刚才创建的那两个目录。

npm config set prefix "你的安装目录\node_global"
npm config set cache "你的安装目录\node_cache"
1
2

设置成功后，后续用命令npm install XXX -g安装以后模块就在目录文件夹D:\Programming\Vue3\nodejs\node_global\node_modules里

第四步：设置环境变量（非常重要）

说明：设置环境变量可以使得在任意目录下都可以使用cnpm、vue等命令，而不需要输入全路径
打开环境变量设置界面

将用户变量最后一行 C:\Users\你的用户名\AppData\Roaming\npm 修改为你的安装目录\node_global

新增系统变量NODE_PATH，在下面的系统变量中点击新建，弹出下框，把变量值设置成“你的安装目录\node_modules”，这里是“D:\Programming\Vue3\nodejs\node_modules”

系统变量中的path增加下面二个变量：
%NODE_PATH%\node_modules
%NODE_PATH%\node_global

至此，配置环境变量完成。

第五步：配置淘宝镜像

按照npmmirror 镜像站的使用说明。
以管理员身份运行cmd，安装淘宝镜像cnpm

npm install -g cnpm --registry=https://registry.npmmirror.com
1

按照提示进行update。

查看cnpm配置修改是否成功。

cnpm config list
cnpm -v
npm config get registry
1
2
3

配置淘宝镜像完成。

第六步：用cnpm安装vue

cnpm install vue -g
注：
install 安装命令
vue 安装模块
-g 放在全局目录
1
2
3
4
5

第七步：安装vue命令行工具

// 这样安装的是 vue 2.x
cnpm install vue-cli -g   
 
// 这样安装的是 vue 最新版
npm install -g @vue/cli
1
2
3
4
5

验证vue是否安装成功

vue -v
1

第八步：安装webpack模板

cnpm i webpack webpack-cli webpack-dev-server -g
1

第九步：安装脚手架vue-cli

cnpm install @vue/cli –g
1

第十步：创建并运行项目

创建vue项目，选择项目想要放的位置，用cd命令切换到该目录，
执行以下命令：

vue create vue-project（项目名）
1

可以选择创建Vue2版本或者Vue3版本的项目。

接下来我们来运行项目。

npm run serve
1

复制得到的其中一个网页链接在浏览器打开
如下图所示：运行成功

三、npm安装包

在终端中下载一定要用管理员打开，然后cd到vue的项目中使用npm安装。

axios包：

npm install axios
1

ElementUI包：

npm install element-ui --save
1

Echarts包：

npm install echarts --save
1

ArcGIS API for JavaScript包：

npm install @arcgis/core
1

openlayers包：

npm install ol
1

路由库：

npm install vue-router
1

cesium包：

npm install cesium
1

四、Vue卸载

首先，打开终端或命令行窗口，运行以下命令以全局卸载Vue CLl：

npm uninstall -g @vue/cli
1

接下来使用以下命令检查是否成功卸载Vue CLl：

vue --version
1

如果您看到命令行返回“vue: command not found"或类似的错误消息，这意味着Vue CLl已成功卸载。

C:\Users\ZLH>vue--version
'vue’不是内部或外部命令，也不是可运行的程序或批处理文件。
1
2

参考：
https://blog.csdn.net/zcj666999/article/details/132377169