认识Web前端、Web后端、桌面app和移动app新开发模式 - 基于Node.js环境和VS Code工具
认识Web、桌面和移动app新开发模式 - 基于Node.js环境和VS Code工具
一、开发环境的搭建（基于win10）
1、安装node.js和npm
- 到node.js官网下载安装包（包含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/clinpm 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开发
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 -
笔者的使用方法
-
用 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或输入服务器端的地址，手机端会自动加载服务器端的资源，在服务器端改动代码后保存会自动加载到手机端
