win10 安装vue环境及pycharm中编辑vue

环境：win10

1. 安装配置nodejs

首先下载好nodejs
官网地址： https://nodejs.org/en/
下载LTS版， .msi结尾的安装包
双击此安装包，一路点击next，直至安装完成。
默认会安装到 C:\Program Files\nodejs 下，并且会自动添加环境变量。
安装完成之后，进入cmd命令行，输入node -v 和 npm -v，会出现对应的版本号，即为成功。如图：

如果选择默认安装路径，以后下载模块依赖的话也会存到c盘，为避免占用c盘空间，可以进行如下操作：
在d盘创建nodejsFiles文件见，进入此文件夹，再创建两个文件夹：node_cache和node_global。
如图:

创建好后还需要配置环境变量，右键我的电脑，高级系统设置>环境变量>系统变量，点击新建，变量名：NODE_PATH, 变量值：D:\nodejsFiles, 然后再找到path变量名，点击编辑，新建 %NODE_PATH% ，添加好后一路点击确定。最后path里会显示

最后设置更改模块和缓存安装路径：
设置全局路径，在cmd中输入：
npm config set prefix “D:\nodejs\node_global”
npm config set cache “D:\nodejs\node_cache”
注意：根据自己的文件输入相应的路径

2. 安装vue

1.设置淘宝为国内镜像源****
npm config set registry https://registry.npmmirror.com
2.查看设置的国内镜像对不对
npm config get registry
3.安装vue.js到全局
npm install vue -g
4.安装Vue CLI
一：Vue CLI2 vue2
安装: npm install -g vue-cli
卸载: npm uninstall -g vue-cli
创建项目：vue init webpack vue-cli2 // vue-cli2 为项目名称，项目名称不能出现大写字母
启动项目：npm run dev // package.json 文件配置中就能看出
二、 Vue CLI3/4 vue3
安装: npm install -g @vue/cli
卸载: npm uninstall -g
创建项目：vue create vue-cli4　　 // vue-cli4 为项目名称
启动项目：npm run serve // package.json 文件配置中就能看出
三、Vue-cli3和2的桥接工具
npm install -g @vue/cli-init
查看vue安装结果：
PS C:\WINDOWS\system32> vue --version
@vue/cli 5.0.4

如果报错 vue 不是内部或外部命令：
把 vue.cmd所在路径添加到系统环境变量里去

5.安装webpack
npm install webpack webpack-cli -g

3. pycharm里安装vue