認識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或輸入伺服器端的位址，手機端會自動加載伺服器端的資源，在伺服器端改動代碼後儲存會自動加載到手機端

轉載于:https://www.cnblogs.com/yuzhihui/p/7581774.html

認識Web前端、Web後端、桌面app和移動app新開發模式 - 基于Node.js環境和VS Code工具...認識Web、桌面和移動app新開發模式 - 基于Node.js環境和VS Code工具

認識Web、桌面和移動app新開發模式 - 基于Node.js環境和VS Code工具

一、開發環境的搭建（基于win10）

1、安裝node.js和npm

2、配置npm包管理器

3、安裝配置cnpm包管理器（預設配置的是淘寶npm鏡像）

4、安裝配置yarn包管理器

5、安裝前端自動化建構工具

6、安裝前端子產品打包（預編譯）工具

7、關于package.json的配置

二、基于Angular（V2）開發的前端開發

1、設定開發環境安裝（安裝指令行工具Angular CLI）

2、建立新項目

3、啟動開發伺服器

三、基于React開發的前端開發

1、設定開發環境安裝（安裝指令行工具create-react-app）

2、建立新項目

3、啟動開發伺服器

四、基于Vue開發的前端開發

1、設定開發環境安裝（安裝指令行工具vue-cli）

2、建立新項目(基于 webpack 模闆)

3、啟動開發伺服器

五、基于Electron的桌面app開發

開始使用

六、基于Ract Native的移動app開發

1、設定開發環境安裝（安裝指令行工具create-react-native-app）

2、建立新項目

3、啟動開發伺服器

繼續閱讀