Win10下Vue的环境搭建

1.Node.js安装

---

1.首先在Node.js官网，下载并安装与电脑版本对应Node.js
2.打开Powershell输入：

node -v#查看版本号
npm -v#npm版本号
node#输入node
console.log("Hi");#再输入

3.如下图所示即安装成功

4.(可选)更改npm中global的存放路径以及cache的路径
4.1 以管理员身份运行Powershell

4.2 输入以下命令：
C:\Program Files\nodejs 为node.js的安装路径

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

4.3 更改环境变量
因修改了npm的路径，需对环境变量进行修改
在下方的系统变量的Path中新增：
C:\Program Files\nodejs\node_global\node_modules
在上方的用户变量的Path中：
将原来的C:\Users\[你的用户名]\AppData\Roaming\npm
修改为：C:\Program Files\nodejs\node_global

4.4 测试
在Powershell中

npm install express -g

安装完成在C:\Program Files\nodejs\node_global\node_modules目录下应该能看见express文件夹以及其对应的文件

2. 更换包源

---

(1).安装cnpm更换源为淘宝源，运行Powershell

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

(2).如果出现以下的错误
cnpm : 无法加载文件XXX
输入set-ExecutionPolicy RemoteSigned
输入A回车即可

3.安装依赖包

---

(1). webpack

cnpm install webpack –g

(2).vue-cli

cnpm install vue-cli –g

4.Vue项目测试

---

cd [项目存放的文件夹]
vue init webpack [你的测试项目名称]
#在最后一步选择 No, I will handle that myself

完成后

cd [你的测试项目名称]
cnpm install#下载安装项目的依赖
cnpm run dev# RUN起来整个项目，可在后方给出的地址访问

5.VSCode插件推荐

VSCode拓展推荐（前端开发）https://github.com/varHarrie/varharrie.github.io/issues/10

目前自己正在使用的：
Auto Close Tag 自动闭合HTML标签
Auto Rename Tag 修改HTML标签时，自动修改匹配的标签
Vetur
ESLint ESLint插件，高亮提示
Debugger for Chrome 调试Chrome
Prettier Formatter prettier官方插件