Window环境搭建Vue开发环境

Window环境搭建Vue开发环境

一、安装node.js

官网下载

二、设置nodejs prefix（全局）和cache（缓存）路径

1. 在nodejs安装路径下新建node_global和node_cache两个文件夹
   注：这里的node_global就是以后npm install XXX -g安装模块的所在地
2. 命令设置缓存文件夹

npm config set cache "D:\vueProject\nodejs\node_cache"

3. 设置全局模块存放路径

npm config set prefix "D:\vueProject\nodejs\node_global"

三、安装cnpm淘宝镜像

如果提示权限不足则用管理员身份打开

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

四、设置环境变量

1. 鼠标右键"此电脑"，选择“属性”菜单，在弹出的“系统”对话框中左侧选择“高级系统设置”，弹出“系统属性”对话框。
2. 修改系统变量Path,将之前新建的node_global的路径新增进环境变量，如：“D:\VuePorject\nodejs\node_global”
3. 新增环境变量NODE_PATH,值为node_modules所在路径

五、安装Vue

cnpm install vue -g

六、安装vue脚手架（vue-cli）

cnpm install vue-cli -g

七、新建Vue项目(以Vue-cli3及以上为例)

1. 新建项目，选择基本配置(注意项目名不能有大写)

vue create 项目名

项目目录如下

2. 启动项目

cd myproject
npm run serve

八、可能出现的问题

1. npm install 报错（npm ERR! errno -4048，Error: EPERM: operation not permitted,）解决方法

解决方法:三种解决方式

1. 以管理员方式打开webstrom
2. 需要删除npmrc文件。
   强调：不是nodejs安装目录npm模块下的那个npmrc文件
   而是在C:\Users{账户}\下的.npmrc文件.
3. 或者直接用命令清理就行，控制台输入：

npm cache clean --force