开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Vue开发环境配置 -> 正文阅读

[JavaScript知识库]Vue开发环境配置

文章目录

Vue开发环境配置

先来欣赏一下：

在这里插入图片描述

欣赏完了，开撸~~

Vue开发环境配置

包括：

Node.js

Node.js 就是运行在服务端的 JavaScript。
Node.js 的包管理器 npm，是全球最大的开源库生态系统。
简单地说，Vue的开发和运行**（Vue组件：.vue后缀）**需要用到Node.js环境。

Vue

安装完Vue才能安装Vue-CLI，Vue-CLI可能依赖Vue。

Vue-CLI（Vue脚手架）

vue cli 是一个基于 Vue.js 进行快速开发的完整系统（标准化开发工具/平台）。
vue-cli 提供一个官方命令行工具，可用于快速搭建大型应用。
该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。
只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。

1、Node.js

1.1 Node.js 下载

下载地址：Nodejs官网下载。

根据自己的系统选择对应的版本和位数，我这里选择windows-64位。

如果想下载历史版本，可以下滑找到：

在这里插入图片描述

下载完成，会得到这样一个文件

在这里插入图片描述

1.2 Node.js 安装

右键–选择安装–点击Next。

在这里插入图片描述

打钩–点击Next。

在这里插入图片描述

点击Change可以修改安装位置–点击Next。
建议所有的开发环境都放在一个统一的文件夹下，方便管理。

在这里插入图片描述

保持默认即可。点击Next。

在这里插入图片描述

点击Next即可。
解释说明
- 一些NPM模块在安装时需要从C/C++编译。如果您希望能够安装这些模块，则需要安装一些工具(Python和VisualStudioBuildTools)，打上勾则安装这些工具。
- 如果不安装，则后期可以通过：https://github.com/nodejs/node-gyp#on-windows自行进行安装。

在这里插入图片描述

点击Install进行安装。

在这里插入图片描述

等待安装完成，点击Finish即可完成安装。

在这里插入图片描述

安装完成后，可以简单地检查一下Nodejs是否安装成功。

按住windows键和R键，调出运行窗口，输入cmd，按回车（Enter）。

在这里插入图片描述

输入node -v 显示node.js的版本号，说明node.js安装成功；
输入npm -v 显示npm的版本号，说明node.js自带的npm工具也安装成功了。
注意 -v 之前有个空格。

在这里插入图片描述

1.3 Node.js 配置

安装完的Node.js安装目录的文件如下：

在这里插入图片描述

说明：

NPM（节点包管理器）是的NodeJS的包管理器，用于节点插件管理（包括安装，卸载，管理依赖等）。

新版的Node.js已自带npm工具，安装Node.js时会一起安装，npm的作用就是对Node.js依赖的包进行管理，也可以理解为用来安装或卸载Node.js需要装的东西。

1.3.1 其他环境配置（可跳过）

说明：

这里的环境配置主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径，
之所以要配置，是因为以后在执行类似：npm install express [-g] （后面的可选参数-g，g代表global全局安装的意思）的安装语句时，
会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中，占C盘空间。

1、创建新文件夹

例如：

我在Node.js安装目录下创建node_cache和node_global两个文件夹，用于存放缓存和全局模块，方便统一管理。如下图：

在这里插入图片描述

2、执行命令，设置全局模块和缓存位置

创建完两个文件夹后，windows + R 键，在运行窗口输入cmd，打开命令行窗口。输入如下命令，然后按回车。

npm config set prefix "E:\develop\Nodejs\node_global"
npm config set cache "E:\develop\Nodejs\node_cache"

注意！命令中的路径要改成你自己的。如下：

npm config set prefix "你的全局模块文件夹路径"
npm config set cache "你的缓存文件夹路径"

如图，设置完成后，关闭黑窗口。

在这里插入图片描述

3、配置环境变量

右键–此电脑–属性。

在这里插入图片描述

高级系统设置–高级–环境变量。

在这里插入图片描述

选择上面的用户变量–Path–编辑。

在这里插入图片描述

选择默认路径–编辑。

在这里插入图片描述

设置为自己创建的全局模块保存位置–确定。

在这里插入图片描述

选择系统变量–新建–输入变量名和变量值–确定。

变量名：NODE_PATH

变量值：你自己的全局模块存放位置\node_modules

变量值如：E:\develop\Nodejs\node_global\node_modules

在这里插入图片描述

然后一路点击确定即可完成配置。

4、测试

配置完后，安装个module测试下，打开cmd窗口，输入如下命令进行模块的全局安装：

npm install express -g     # -g是全局安装的意思

如果出现如下图所示的错误，关掉命令行窗口，以管理员的身份再重新运行命令行即可。

在这里插入图片描述

重新运行，安装成功如下图所示：

在这里插入图片描述

打开自己配置的全局模块安装目录，即可看到刚刚安装的全局模块。

在这里插入图片描述

1.3.2 npm配置国内镜像源：淘宝镜像

node.js的npm源默认是在国外的，国内下载有时候很慢，建议配置国内镜像源。

这里配置的是淘宝的，也可以配置其他的，看自己的个人习惯了。

通过npm方式配置

打开命令行窗口（以管理员身份运行），输入以下命令：
```
npm config set registry https://registry.npm.taobao.org
```
验证：返回所设置的地址，则说明设置成功。
```
npm config get registry
```
设置成功，如下图所示：

1.3.3 安装cnpm

说明：因为谷歌安装插件是从国外服务器下载，受网络影响大，可能出现异常。
所以需要安装cnpm（淘宝的），用于加速下载。
官方网址：http://npm.taobao.org

打开命令行窗口（以管理员方式运行），输入以下命令，安装cnpm：
```
npm install -g cnpm --registry=https://registry.npm.taobao.org
```
验证
```
cnpm -v
```
出现如下界面，表示安装验证成功：

在这里插入图片描述

注：CNPM跟NPM用法完全一致，只是在执行命令时将NPM改为CNPM。

之后就可以使用cnpm了：（安装xxx）

npm install xxx  # npm方式
cnpm install xxx # cnpm方式

2、安装Vue

2.1 命令

以管理员身份打开命令行窗口，输入如下命令（cnpm方式）：

cnpm install vue -g

如下图：

在这里插入图片描述

3、安装 Vue-CLI（Vue脚手架）

3.1 安装

以管理员身份打开命令行窗口，输入如下命令（cnpm方式）：

cnpm install vue-cli -g

如下图：

在这里插入图片描述

3.2 验证

以管理员身份打开命令行窗口，输入如下命令（cnpm方式）：
以下方式二选一，进行验证，注意空格。

vue -V
vue --version

如下图：vue-cli 版本号为：2.9.6

在这里插入图片描述

3.3 卸载（重装）vue-cli 或 Vue.js

安装新版本或要重装前，需要先把之前安装的版本卸载掉。

vue-cli（Vue.js）卸载

cnpm uninstall vue-cli -g  # 3.0以下版本卸载
cnpm uninstall -g @vue/cli  # 3.0以上版本卸载

vue-cli（Vue.js）重装（指定版本号）

cnpm install -g @vue/cli  # 安装的是最新版
cnpm install vue-cli@2.9.6  # 指定版本安装【指定版本为3.0以下版本】，其中2.9.6为版本号
cnpm install -g @vue/cli@3.11.0 # 指定版本安装【指定版本为3.0以上版本】，其中3.11.0为版本号