vue开发环境搭建：node.js安装+vue-cli脚手架配置

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了vue开发环境搭建：node.js安装+vue-cli脚手架配置，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1756字，纯文字阅读大概需要3分钟。

内容图文

安装nodejs前，先安装vsCode，下载完成后下一步就可以。
vsCode官网下载地址： https://code.visualstudio.com/Download.

1、node.js安装
下载地址 : http://nodejs.cn/download/.

（1）根据自己的电脑进行选择，我选的是windows安装包（.msi）64位，点击下载，进行安装（一直下一步就可以）。建议不要安装在C盘，我是装在D盘。安装完成后nodeJs的环境变量会自动添加到Path中。
HOME+R 输入cmd打开命令行窗口 进入安装路径 输入node -v , npm -v既可以查看安装的版本号。

（2）打开nodejs安装目录，在该目录下新建两个文件夹“node_cache”和“node_global”

打开cmd，设置全局路径，粘贴以下两个代码，根据你所建的文件夹路径配置，这里是我的电脑中的路径。

npm config set prefix "D:\Program Files\nodejs\node_global"
 
npm config set cache "D:\Program Files\nodejs\node_cache"

（3）基于nodeJs安装cnpm淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

执行完以上代码后，node_global文件夹会变成下图中这样，没执行之前node_global文件夹下为空。

*需在环境变量中配置cnpm：将node_global路径配置在环境变量中。

配置完成后，重新打开cmd，执行“cnpm -v”即可查到相关信息。如图显示即为安装成功。（红框中的警告不解决也可以正常使用）
2、安装vue-cli脚手架
Vue CLI官网链接: https://cli.vuejs.org/zh/guide/installation.html.

之前安装脚手架，我都是用以下代码，但是安装完成之后查询版本是“2.x”版本的，可能会版本不支持。

//旧版本安装
npm install -g vue-cli 

安装新版本的使用一下代码

//新版本安装
npm install -g @vue/cli

如果你已经安装了旧版本，需要先将旧版本卸载，卸载完成之后再安装新版本。

//卸载旧版本
npm uninstall vue-cli -g

安装完成之后，打开cmd，输入“vue --version”或者“vue -V（此处必须为大写V）”，查看版本号及是否安装成功。

到此所有配置已全部完成。可以创建一个新项目了。

3、创建新项目
打开cmd，进入你想创建项目的路径下，输入一下代码

vue init webpack vue-test

或者

vue create vue-test

运行成功。

内容总结

以上是互联网集市为您收集整理的vue开发环境搭建：node.js安装+vue-cli脚手架配置全部内容，希望文章能够帮你解决vue开发环境搭建：node.js安装+vue-cli脚手架配置所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---