一、开发环境的搭建（基于win10）
1、安装node.js和npm
到node.js凯发娱发k8官网下载安装包（包含npm）进行安装
验证node.js是否安装成功，在命令行窗口输入命令node -v通过查看版本进行验证
验证npm是否安装成功，在命令行窗口输入命令npm -v通过查看版本进行验证
2、配置npm包管理器
由于国外的镜像不稳定，所以一般需要配置淘宝npm镜像，配置命令如下：
npm config set registry https://registry.npm.taobao.org
配置npm包的全局存放路径（默认路径c:\users\jeffreyyu\appdata\roaming\npm）:
npm config set prefix "c:\program files\nodejs\node_global"
配置npm-cache的路径（默认路径c:\users\jeffreyyu\appdata\roaming\npm-cache）：
npm config set cache "c:\program files\nodejs\node_cache"
3、安装配置cnpm包管理器（默认配置的是淘宝npm镜像）
安装命令如下：
npm install -g cnpm --registry=https://registry.npm.taobao.org
4、安装配置yarn包管理器
安装命令：
npm install -g yarn 或
cnpm install -g yarn
通过yarn包管理器都有会yarn.lock文件
通过yarn --version命令验证是否安装成功
配置淘宝镜像
yarn config set registry https://registry.npm.taobao.org
5、安装前端自动化构建工具
gulp安装命令：
npm install -g gulp –registry=https://registry.npm.taobao.org
grunt安装命令：
npm install -g grunt
gulp/grunt 可以理解为帮助前端自动化构建的工具，用于优化前端工作流程。比如自动刷新页面、combo、压缩css、js、编译less等等。推荐gulp。
6、安装前端模块打包（预编译）工具
常用模块化方案
webpack安装命令：
npm install -g webpack
browserify安装命令：
npm install -g browserify
前端模块化的方案 browserify/webpack 和 seajs/requirejs 的区别：
1、seajs/requirejs : 是一种"在线编译" 模块的方案，相当于在页面上加载一个cmd/amd解释器。这样浏览器就认识了define、exports、module这些东西。也就实现了模块化。
2、webpack/browserify : 是一个"预编译"模块的方案，相比于上面 ，这个方案更加智能。这里以webpack为例。首先，它是预编译的，不需要在浏览器中加载解释器。另外，你在本地直接写js，不管是 amd / cmd / es6 风格的模块化，它都能认识，并且编译成浏览器认识的js
7、关于package.json的配置
在package.json里面dependencies依赖包的版本号前面的符号有两种，一种是~，一种是^。
的意思是匹配最近的小版本，比如1.0.2将会匹配所有1.0.x版本，但不匹配1.1.0
的意思是匹配最近的大版本，比如1.0.2 将会匹配所有1.x.x, 但不包括2.x.x
二、基于angular（v2）开发的前端开发
1、设置开发环境安装（安装命令行工具angular cli）
安装(全局安装)命令：
npm install -g @angular/cli
或
cnpm install -g @angular/cli
卸载命令
npm uninstall -g @angular/cli
npm cache clean
2、创建新项目
安装命令：
ng new project-name
包管理器设置命令：
ng set --global packagemanager=yarn 或
ng set --global packagemanager=cnpm
3、启动开发服务器
进入项目，并启动服务器命令：
cd project-name
ng serve --open
三、基于react开发的前端开发
1、设置开发环境安装（安装命令行工具create-react-app）
安装(全局安装)命令：
npm install -g create-react-app 或
cnpm install -g create-react-app
卸载命令
npm uninstall -g create-react-app
npm cache clean
2、创建新项目
创建命令：
create-react-app project-name
3、启动开发服务器
进入项目，并启动服务器命令：
cd project-name
npm start
四、基于vue开发的前端开发
1、设置开发环境安装（安装命令行工具vue-cli）
安装(全局安装)命令：
npm install -g vue-cli 或
cnpm install -g vue-cli
卸载命令
npm uninstall -g vue-cli
npm cache clean
2、创建新项目(基于 webpack 模板)
创建命令：
vue init webpack my-project
3、启动开发服务器
进入项目命令：
cd my-project
安装依赖包命令：
npm install
启动服务器命令：
npm run dev
五、基于electron的桌面app开发
for instance, electron uses just the rendering library from chromium rather than all of chromium. this makes it easier to upgrade chromium but also means some browser features found in google chrome do not exist in electron.
electron (原名 atom-shell)是 github 开源的跨平台桌面应用开发框架，框架基于node.js 和 chromium进行开发的，该框架允许你使用javascript, html 和 css来开发桌面应用。基于electron框架开发的有 visual studio code 和 atom 等著名开源编辑器项目。
开始使用
electron-quick-start 的官方使用方法：
# clone this repository
git clone https://github.com/electron/electron-quick-start
# go into the repository
cd electron-quick-start
# install dependencies
npm install
# run the app
npm start
笔者的使用方法
下载electron-quick-start
用 visual studio code(vs code) 打开 electron-quick-start文件夹
在vs code中打开命令行工具，输入命令npm install安装依赖包
配置launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "electron main",
"runtimeexecutable": "${workspaceroot}/node_modules/.bin/electron",
"program": "${workspaceroot}/main.js",
"protocol": "legacy"
}
]
}
配置完后即可通过vs code启动调试
electron的开发环境搭建完毕。此外，github还有一个与electron有些类似的开源项目nw.js ，微信小程序开发工具就是基于nw.js开发的。
六、基于ract native的移动app开发
1、设置开发环境安装（安装命令行工具create-react-native-app）
安装(全局安装)命令：
npm install -g create-react-native-app 或
cnpm install -g create-react-native-app
卸载命令
npm uninstall -g create-react-native-app
npm cache clean
2、创建新项目
创建命令：
create-react-native-app awesomeproject
3、启动开发服务器
进入项目命令：
cd awesomeproject
启动服务器命令：
npm start
启动后命令窗口会打印qr code和服务器的地址（在vs code的命令行中看不到），在手机端下载expo app，用该app扫描qr code或输入服务器端的地址，手机端会自动加载服务器端的资源，在服务器端改动代码后保存会自动加载到手机端
