Windows 开发 Vue.js 项目的环境准备

---

1、环境

操作系统 ： Windows 10
nvm ： 1.1.7
node ： 10.0.0
npm ： 5.6.0
yarn ： 1.22.11
Vue.js ： 2.6.11
Visual Studio Code ： 1.59.0

2、NVM : Node 版本管理工具（推荐）

官方网站

GitHub - coreybutler/nvm-windows: A node.js version management utility for Windows. Ironically written in Go.
地址

PS ： 需要 Administrator 权限。

下载地址
多种版本，本文使用 nvm-setup.zip 。.exe 文件安装，可以全部下一步即可完成安装。或者根据自己的爱好选择。

常用命令

查看 nvm 版本

nvm version

设置Node安装镜像（更快，否则有点慢）

nvm node_mirror http://npm.taobao.org/mirrors/node/
nvm npm_mirror https://npm.taobao.org/mirrors/npm/

开启 nvm 管理 node 版本功能

nvm on

查看已经安装的 node 版本列表

nvm list

安装 node 对应的版本

nvm install 10

使用 node 对应的版本

nvm use 10

问题记录&解决方法

问题：管理 16.14.2 的时候有问题，npm 使用的时候一直报错。
解决方法：切换 nvm 管理其他版本的 node。找到 nvm 管理的 16.14.2 的目录，删除里面的内容。手动安装 node 16.14.2 到 nvm 管理的目录。切换 nvm 到 16.14.2 ，这样就可以正常使用了。

3、nrm

nrm 用于管理 Node 的 registry，可以方便的在多个 registry 中进行切换
安装

npm -g install nrm

安装完后就可以立即使用了，我们来列出可用的源：

nrm ls
  npm ---- https://registry.npmjs.org/
  cnpm --- http://r.cnpmjs.org/
  taobao - https://registry.npm.taobao.org/
  nj ----- https://registry.nodejitsu.com/
  rednpm - http://registry.mirror.cqupt.edu.cn/
  npmMirror  https://skimdb.npmjs.com/registry/
  edunpm - http://registry.enpmjs.org/

使用淘宝源

nrm use taobao

说明：16.14.2 安装 nrm 有问题，这个版本为啥这么多问题！！！ 不折腾了，我选择换个版本吧 ～～ ！！ 14.18.2 可以正常使用。

4、node（可以通过 nvm 管理）

node 官网

查看版本

node --version

npm 官网

查看版本

npm --version

淘宝 NPM 镜像

官网下载依赖包，比较慢。可以配置成 “淘宝 NPM 镜像”。

官网

使用定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm :

npm install -g cnpm --registry=https://registry.npmmirror.com

常用命令

安装依赖包

npm install

运行开发环境

npm run dev

打包

npm run build

问题记录&解决方法

遇到问题：npm install 过程中，报错 EINTEGRITY ***** 512 *****
导致问题的原因：参考这个网站
简单处理： 修改 package-lock.json 中的 sha512 编码，再重新 npm install ，则可以通过检验了。但是这不是解决不了根本，根本的解决方法详见上面大神写网站吧！

5、yarn（依赖 node）

官网

安装

npm install -g yarn

查看版本

yarn --version

常用命令

安装依赖包（Project setup）

yarn install

运行开发环境（Compiles and hot-reloads for development）

yarn serve

打包（ Compiles and minifies for production）

yarn build

6、IDE

Visual Studio Code（免费！！！也可以选择其他收费的啦～ 不过感觉这个足够好用啦 ！）

官网

下载地址

根据项目/需求/开发习惯安装需要的插件（推荐中的插件都挺好用的）

7、版本管理工具

git
官网

TortoiseGit
官网

PS ： git 命令行虽然很强大，但是有学习门槛，也容易出现误操作。推荐使用 TortoiseGit 或类似的可视化的软件，避免提交的时候把别人的代码干掉了，或者出现错误合并代码的情况。

最后

拉取代码/新建项目，开始开发啦 ～～

---

总结

相比 Java 开发，前端开发需要准备的环境简单不少。（据说是某些前端开发人员，不做 Java 开发的原因
╮(￣▽ ￣)╭ ）