认识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/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或输入服务器端的地址，手机端会自动加载服务器端的资源，在服务器端改动代码后保存会自动加载到手机端