手记

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

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

  1. 安装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,进行依赖的安装和管理。

  1. 我录制的vue.js课程已经上线了,欢迎大家学习!

带你入门Vue.js 2.0 开发

18人推荐
随时随地看视频
慕课网APP