windows搭建vue开发环境

参考博客：最详细的vue安装教程_一只野生程序媛的博客-CSDN博客

Vue安装环境最全教程，傻瓜式安装_浪漫主义码农的博客-CSDN博客

1、安装nodejs，从下面官网下载版本，对应安装就行了：

Node.js 中文网

2、安装好后，配置环境变量

看看安装是否成功（这里是否需要配置node环境变量）：

node -v

npm -v

把全局模块所在路径及缓存路径切换，在nodejs主路径下，新建node_global和node_cache文件夹：

然后 

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

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

执行完之后，再输入npm list -global

npm config list  显示所有配置信息

3、安装淘宝镜像(cnpm)  npm install cnpm -g --registry=https://registry.npm.taobao.org 

然后配置环境变量
配置NODE_PATH

 配置CNPM_PATH

 然后在Path里面增加，%CNPM_PATH%  和 %NODE_PATH% :

 4、为什么要配置环境变量？参考你的项目需要运行java一样，配置JAVA_HOME这些；

5、NPM安装vue.js

输入npm install vue -g

这里的-g是指安装到global全局目录去

6、安装 vue脚手架

命令:cnpm install @vue/cli -g(最新版本)

//cnpm install vue-cli -g(不是最新版本)

 7、查看安装情况

 8、输入 vue ui进入界面（vue3以上版本才有 vue ui命令）：

然后创建项目（或者使用类似vue create my-project命令创建项目，

或者使用第三方开发工具 vscode或者idea这种，也可以创建）：

 

9、使用 vue init 项目时候，报错：

vue init webpack hellovue

Command vue init requires a global addon to be installed. Please run npm i -g @vue/cli-init and try again

原因是因为 命令vue init需要安装一个全局加载项，

直接输入命令：npm install -g @vue/cli-init

10、dir查看项目创建：

 11、npm run dev

进入有 package.json的路径，

然后打开，http://localhost:8080/#/