首页手记 windows系统下前端node开发环境搭建

windows系统下前端node开发环境搭建

标签：

Node.js 前端工具 Vue.js

现在前端开发，严重依赖nodejs来实现工程化和测试和上线。所以搭建一个基于node的前端开发环境尤为重要。
通常而言mac和其他linux系统还能好点，毕竟本身支持linux命令，系统环境也比较类似，比较容易出问题的是windows。本文就windows环境下的node开发环境进行一下讲解：

安装nodejs

第一步肯定是安装nodejs，nodejs本身其实对windows很友好，官网就提供了安装包，你只需要像装其他软件一样给它装到系统里就行了。

官网下载地址： https://nodejs.org/en/download/

2.安装git

git是类似svn的版本控制工具，那你可能要问，我的项目不用git做管理，也没有团队我是不是就可以不用装git了。
答案是不太行，因为一些工具依赖了github，比如vue-cli 会从使用git 从 github上下载模板。
另外，使用github管理和发布个人项目也是一个很好的渠道，使用git进行团队协作也是目前最为流行的开发方式。

windows下安装git： https://git-for-windows.github.io/

3.终端，shell

shell就是命令行工具，windows的命令行工具cmd，和linux不太一样，一些基本命令也不同，环境也不同。
为什么要尽量保持linux环境命令行，主要原因是目前绝大多数web站点都部署在linux服务器下，你在windows下开发的网站，有可能跟部署服务器不兼容。
另外，linux操作也算是程序员的必备技能了。
windows下，我们也可以采用linux shell环境，比如：

随着git安装 git-bash： https://git-for-windows.github.io/

windows下的全能shell： http://mobaxterm.mobatek.net/

win10 下可以直接使用ubuntu bash-shell 方法：
http://jingyan.baidu.com/article/e73e26c0be8b6624adb6a7ba.html

4.环境变量

windows下出现这个提示，多半是环境变量配置有问题。
cmd或者其他shell要查找命令，需要从系统环境变量里找地址，命令都对应一个*.cmd文件，或者类似的命令文件。

win下环境变量详解： http://www.cnblogs.com/sunada2005/articles/2725277.html
win下设置环境变量Path：
http://jingyan.baidu.com/article/b24f6c82cba6dc86bfe5da9f.html

5.npm

npm是什么？npm是 nodejs的依赖下载和管理工具，比如vuejs，你可以直接通过npm install vue 命令直接安装，就不用手动下载js文件了。

npm install vue-cli -g，如果使用npm在安装某个包的时候带上-g参数，意味着该包是全局安装 global。如此安装完成，你就可以在命令行里使用vue-cli这样的全局包。

npm install xxx，会把包安装到当前目录的node_modules目录下。
npm install xxx -g，会把包安装在npm全局目录的node_modeules目录下，通常位于c盘我的文档下。而这个目录被指定在windows环境变量的Path里，所以命令行就可以直接访问这个包工具。

npm最容易产生的就是网络问题！ npm工具需要从node官网的库里下载依赖，这个链接在国内，很慢很慢。

现在通常的解决办法，就是改变npm 的registry，也就是注册表， npm-registry包含了，npm从哪个库里下载。

我们可以在每次npm下载的时候指定registry，比如

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

https://registry.npm.taobao.org就是阿里提供的npm仓库注册表，这个下载速度要比npm默认的注册表快很多。

如果你觉得，每次安装都要带registry参数很麻烦，你可以用alias（别名）命令：

alias cnpm="npm --registry=https://registry.npm.taobao.org \
--cache=$HOME/.npm/.cache/cnpm \
--disturl=https://npm.taobao.org/dist \
--userconfig=$HOME/.cnpmrc"

这个命令的意思是，设置cnpm这样一个别名，每次跑cnpm都会执行后面那一套，而后面就是指定了仓库和缓存等一系列参数的淘宝地址。
设置完cnpm以后，接下来你就可以直接使用cnpm来替代npm，进行依赖的安装和管理。