Vueweb前端三大主流框架之一，是一套构建用户界面的渐进式框架。下面这篇文章主要介绍的是关于Vue安装配置教程的相关信息，通过图文介绍的非常详细，有需要的朋友可以参考一下。
:
目录
1.下载并安装Vue 2。创建全局安装目录和缓存日志目录3。配置环境变量1。环境变量-用户变量-选择路径-单击编辑2。环境变量-系统变量-新建3。安装vue1。安装vue.js2安装webpack模板3。
一、下载和安装Vue
官网下载地址下载| Node.js
选择适合自己的版本，推荐LTS，长期稳定的版本。我选择了Windows Installer(。msi)这里是64位。
下载完成后，双击下载的安装包。
单击下一步。
检查我接受..然后单击下一步。
这里建议换到你想要的安装目录，然后点击下一步(可以先自己搭建安装目录。下面是我提前搭建的一个目录：E:\Java\nodejs)
这里有五个选项，有时间可以看看，就是安装的时候会安装一些组件和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\你的用户名\AppData\Roaming\npm，另一个是环境变量---系统变量---Path中的软件安装目录。我们需要添加和修改它们。
1. 环境变量---用户变量---选中Path---点编辑
将C:\Users\你的用户名\AppData\Roaming\npm更改为你的安装目录\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
npm安装vue-路由器-g
都搞定了。当我们打开自定义全局模块目录中的node_modules文件夹时，会发现所有安装的模块都统一在这里。
四、我的第一个的vue-cli应用程序
1.创建项目(最好是从cd到D或E的某个地方，也就是项目的路径，否则项目会在C:\Users\ user name \中新建，也可以直接在想要的项目路径下输入cmd)可能会出现权限问题，所以我们还是以管理员身份运行cmd窗口。
2.基于webpack模板创建vue应用程序
vuinit web pack项目名称
根据自己的需求来操作。
项目名称是什么？输入项目描述？输入作者？是否安装了回车编译器是否安装了回车vue-router y回车作为代码用单元测试工具检查是否安装了回车n回车单元测试相关n回车在创建回车后直接初始化。
因为没有自动初始化，所以我们根据代码提示手动初始化。
cd myvue
npm运行开发
访问网址：成功！
总结
这就是这篇关于Vue安装和配置的文章。有关Vue安装和配置的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。