Vue配置,安装vue的命令,超级详细的Vue安装与配置教程

Vueweb前端三大主流框架之一，是一套构建用户界面的渐进式框架。下面这篇文章主要介绍的是关于Vue安装配置教程的相关信息，通过图文介绍的非常详细，有需要的朋友可以参考一下。

: 目录

1.下载并安装Vue 2。创建全局安装目录和缓存日志目录3。配置环境变量1。环境变量-用户变量-选择路径-单击编辑2。环境变量-系统变量-新建3。安装vue1。安装vue.js2安装webpack模板3。

一、下载和安装Vue

官网下载| Node.js

选择适合自己的版本，推荐LTS，长期稳定的版本。我选择了Windows Installer(。msi)这里是64位。

下载完成后，双击下载的安装包。

单击下一步。

检查我接受..然后单击下一步。

这里建议换到你想要的安装目录，然后点击下一步(可以先自己搭建安装目录。下面是我提前搭建的一个目录：E:Javanodejs)

这里有五个选项，有时间可以看看，就是安装的时候会安装一些组件和npm，同时会添加环境变量，右边有说明。我们直接点下一个吧。

不要在这里打勾，只需点击下一步

安装

结束

安装完成后，检查安装是否成功。

打开cmd并输入以下命令。

节点v

npm -v

输出版本号表明安装成功。

安装后的完整目录：

在我们的安装目录下，创建两个名为node_cache和node_global的文件夹。

打开Dos窗口并执行以下命令，将npm的全局模块目录和缓存目录配置为我们刚刚创建的两个目录。

Npconfig设置前缀“您的安装目录node_global”

Npconfig设置缓存您安装目录node_cache

为了以后快速下载包，修改来源是淘宝图片。(此处修改，不需要安装cnpm，因为cnpm是

Node.js淘宝镜像加速器，

。如果这里配置了，就不需要安装了。)

npm配置集注册表https://registry.npm.taobao.org

检查npm配置修改是否成功。

npm配置列表

同时，我们会找到一个附加文件：C:Users user name 下的npmrc文件，可以理解为记录当前用户修改信息的配置文件。如果删除该文件，您刚才修改的所有参数都将丢失，并且将返回默认配置。

三、配置环境变量

在安装过程中，会自动配置两个环境变量，一个是

环境变量---用户变量---Path

中的

C:Users你的用户名AppDataRoamingnpm

，另一个是

环境变量---系统变量---Path

中的

软件安装目录

。我们需要添加和修改它们。

1. 环境变量---用户变量---选中Path---点编辑

将

C:Users你的用户名AppDataRoamingnpm

更改为

你的安装目录node_global

。

2. 环境变量---系统变量---新建

变量名：NODE_PATH

变量值：您的安装目录节点_全局节点_模块

注意：这里的node_modules目录还不存在，但是当我们将模块安装到全局目录中时，我们会自动生成这个文件夹。

请记住将%NODE_PATH%添加到系统变量PATH中。

三、安装vue

1. 安装vue.js

npm安装vue -g

其中-g是全局安装，这意味着安装到全局的全局目录。如果没有添加-g，模块将被安装到当前路径下的node_modules文件夹中，如果没有目录，将自动创建。

如果出现此问题，是因为当前用户没有此权限。

一些在线方法是删除。C:Users user name 下的npmrc文件。这是不能做的，因为当那个文件被删除时，我们之前修改的全局模块目录和缓存目录配置将会消失！到时候vue包会下载到C: Users your username AppData Roaming NPM，这是默认的地方，我们再早修改也没什么意义。

正确的打开方式是以管理员身份运行！

s用WIN搜索“命令提示符”，右键以管理员身份运行。

npm安装vue -g

2. 安装webpack模板

npm安装webpack -g

另外，在webpack 4x以上，webpack将命令相关的内容全部放入webpack-cli，所以需要安装webpack-cli。

npm安装webpack-cli -g

输入webpack -v，如果能输出版本号，就说明一切都安装了。

3. 安装脚手架vue-cli

npm安装vue-cli -g

输入vue - version，如果能输出版本号，说明安装了。

4. 安装vue-router