前端培訓-中級階段（39）- 腳手架 vue-cli

前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，如今前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本着提高技術水平，打牢基礎知識的中心思想，咱們開課啦（每週四）。

前面咱們學習 vue 基本的使用，如今咱們要開始更好的使用 vue 。
通常來講咱們使用 vue 無非下面幾種方式

1. script 引入資源、代碼（古老的方式）
2. requireJs 引入資源（早期模塊化方式）
3. webpack、gulp 等構建打包的方式（單文件組件，目前用的最多方式）

webpack 的方式也是咱們今天要講的，不過 webpack 配置太繁瑣了。咱們直接上 vue-cli。

webpack 構建的好處（工程化）

1. babel 處理 js 的兼容性問題。（ES6 轉換爲 ES5）
2. eslint 檢查規範
3. postcss 處理 css 的兼容問題。（自動前綴、scss 等等）
4. 壓縮資源
5. 打包、緩存問題等等
6. mock 數據、跨域代理等等

能夠看到，經過 webpack 等工具咱們可讓前端項目更加健壯，並且也解決了許多痛點。

vue-cli@4.3.1

vue-cli 是 vue 的腳手架，能夠快速配置一個開發環境，基於 Vue.js 進行快速開發的完整系統。

前端就一個問題，更新賊快，基本不兼容，本文基於 vue-cli@4.3.1 版本。

vue-cli 有什麼特色

1. 功能豐富
   對 Babel、TypeScript、ESLint、PostCSS、PWA、單元測試和 End-to-end 測試提供開箱即用的支持。
2. 圖形化界面
   經過配套的圖形化界面建立、開發和管理你的項目。
3. 易於擴展
   它的插件系統可讓社區根據常見需求構建和共享可複用的解決方案。

Vue CLI 致力於將 Vue 生態中的工具基礎標準化。
它確保了各類構建工具可以基於智能的默認配置便可平穩銜接，這樣你能夠專一在撰寫應用上，而沒必要花好幾天去糾結配置的問題。
它也爲每一個工具提供了調整配置的靈活性，無需 eject。

vue-cli 起步

安裝：

Vue CLI 須要 Node.js 8.9 或更高版本 (推薦 8.11.0+，其實我感受 10.x 是極好，12.x 最好先不要上)。你可使用 nvm 或 nvm-windows 在同一臺電腦中管理多個 Node 版本

# 使用 npm 全局安裝
npm install -g @vue/cli
# OR  使用 yarn 全局安裝
yarn global add @vue/cli

# 查看 vue-cli 版本
vue -V

建立一個項目：

# 使用命令提示行建立一個項目
vue create lilnong-top-cli
# OR 使用可視化界面建立一個項目
vue ui

1. Please pick a preset:

   1. default (Babel, eslint)
      使用默認配置，包含babel,eslint

   2. manually select features
      手動選擇，自由組合（Babel、TS、PWA、Router、Vuex、css pre-processors、linter/formatter、Unit Testing、E2E Testing）

      1. babel 是用來將代碼編譯成能夠被低版本瀏覽器執行的工具，好比箭頭函數 ()=> 等。

      2. TS 是指代碼基於 TS 來編寫，固然仍是會編譯成 JS 來在瀏覽器中執行的。

         1. 是否使用class風格的組件語法：Use class-style component syntax?
         2. 是否使用babel作轉義：Use Babel alongside TypeScript for auto-detected polyfills?
      3. PWA 是指資源緩存，能夠像本地應用同樣使用。
      4. Router 是路由系統。是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構建單頁面應用變得易如反掌。
      5. Vuex 是數據管理系統。是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也集成到 Vue 的官方調試工具 devtools extension，提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能。

      6. css pre-processors 就是 postcss、sass 之類的預處理工具。

         1. 選擇CSS 預處理類型：Pick a CSS pre-processor

      7. linter/formatter 代碼語法檢測/代碼美化

         1. 選擇Linter / Formatter規範類型：Pick a linter / formatter config
         2. 選擇lint方式，保存時檢查/提交時檢查：Pick additional lint features
      8. Unit Testing、E2E Testing

2. Pick the package manager to use when installing dependencise

   1. use Yarn
      使用 Yarn 做爲包管理工具
   2. use NPM
      使用 NPM 做爲包管理工具

快速原型開發：執行單個文件

使用 vue serve 和 vue build 命令對單個 *.vue 文件進行快速原型開發，不過這須要先額外安裝一個全局的擴展：

npm install -g @vue/cli-service-global

vue serve 的缺點就是它須要安裝全局依賴，這使得它在不一樣機器上的一致性不能獲得保證。所以這隻適用於快速原型開發。

vue serve MyComponent.vue

vue-cli 結構

- lilnong-top-cli: project項目文件
-- .gitignore
-- babel.config.js: babel 配置文件
-- node_modules: 包
-- package-lock.json
-- package.json：webpack 配置文件，vue-cli 也是使用 webpack 的，因此主要看這個文件。
-- public: 資源
-- README.md    
-- src: 代碼

~/.vuerc 文件

~/ 是指當前用戶目錄，好比我，登錄用戶名是 linong，linux 中就是 /home/linong，window 中是 C:\Users\linong。

~/.vuerc 保存的是手動選擇特性。在操做提示的最後你能夠選擇將已選項保存爲一個未來可複用的 preset。

vue CLI 插件系統結構

Vue CLI 使用了一套基於插件的架構。
若是你查閱一個新建立項目的 package.json，就會發現依賴都是以 @vue/cli-plugin- 開頭的。
插件能夠修改 webpack 的內部配置，也能夠向 vue-cli-service 注入命令。
在項目建立的過程當中，絕大部分列出的特性都是經過插件來實現的。

基於插件的架構使得 Vue CLI 靈活且可擴展。若是你對開發一個插件感興趣，請翻閱插件開發指南。

能夠經過 vue ui 命令使用 GUI 安裝和管理插件，可使用命令行的方式 vue add eslint。

建議使用 vue ui ，圖形化的界面仍是比較容易使用

vue-cli 命令

該部分不重要，能夠直接掠過

vue serve

Usage: serve [options] [entry]

在開發環境模式下零配置爲 .js 或 .vue 文件啓動一個服務器

Options:

  -o, --open  打開瀏覽器
  -c, --copy  將本地 URL 複製到剪切板
  -h, --help  輸出用法信息

vue build

Usage: build [options] [entry]

在生產環境模式下零配置構建一個 .js 或 .vue 文件

Options:

  -t, --target <target>  構建目標 (app | lib | wc | wc-async, 默認值：app)
  -n, --name <name>      庫的名字或 Web Components 組件的名字 (默認值：入口文件名)
  -d, --dest <dir>       輸出目錄 (默認值：dist)
  -h, --help             輸出用法信息

vue create

建立一個由 `vue-cli-service` 提供支持的新項目

用法：create [options] <app-name>

選項：

  -p, --preset <presetName>       忽略提示符並使用已保存的或遠程的預設選項
  -d, --default                   忽略提示符並使用默認預設選項
  -i, --inlinePreset <json>       忽略提示符並使用內聯的 JSON 字符串預設選項
  -m, --packageManager <command>  在安裝依賴時使用指定的 npm 客戶端
  -r, --registry <url>            在安裝依賴時使用指定的 npm registry
  -g, --git [message]             強制 / 跳過 git 初始化，並可選的指定初始化提交信息
  -n, --no-git                    跳過 git 初始化
  -f, --force                     覆寫目標目錄可能存在的配置
  -c, --clone                     使用 git clone 獲取遠程預設選項
  -x, --proxy                     使用指定的代理建立項目
  -b, --bare                      建立項目時省略默認組件中的新手指導信息
  -h, --help                      輸出使用幫助信息

vue-cli-service serve

這個命令就是咱們 npm run serve 執行的 "serve": "vue-cli-service serve",

用法：vue-cli-service serve [options] [entry]
選項：
  --open    在服務器啓動時打開瀏覽器
  --copy    在服務器啓動時將 URL 複製到剪切版
  --mode    指定環境模式 (默認值：development)
  --host    指定 host (默認值：0.0.0.0)
  --port    指定 port (默認值：8080)
  --https   使用 https (默認值：false)

vue-cli-service build

這個是 npm run build 時執行代碼

用法：vue-cli-service build [options] [entry|pattern]

選項：

  --mode        指定環境模式 (默認值：production)
  --dest        指定輸出目錄 (默認值：dist)
  --modern      面向現代瀏覽器帶自動回退地構建應用
  --target      app | lib | wc | wc-async (默認值：app)
  --name        庫或 Web Components 模式下的名字 (默認值：package.json 中的 "name" 字段或入口文件名)
  --no-clean    在構建項目以前不清除目標目錄
  --report      生成 report.html 以幫助分析包內容
  --report-json 生成 report.json 以幫助分析包內容
  --watch       監聽文件變化

vue-cli 配置

瀏覽器兼容性 browserslist Polyfill

咱們知道兼容性分爲 JS 兼容性、CSS 兼容性、html 兼容性

vue-cli 使用 package.json 文件裏的 browserslist 字段 (或一個單獨的 .browserslistrc 文件)，指定了項目的目標瀏覽器的範圍。這個值會被 @babel/preset-env 和 Autoprefixer 用來肯定須要轉譯的 JavaScript 特性和須要添加的 CSS 瀏覽器前綴。瞭解如何指定瀏覽器範圍。

1. html 兼容性，比較小衆，並且 vue 也有必定的兼容性要求，因此就不放開說了。

   1. ie 使用 html5 標籤須要建立一下才能正常使用。可使用 _html5shiv_， 是一個針對 IE 瀏覽器的 HTML5 JavaScript 補丁，目的是讓 IE 識別並支持 HTML5 元素
   2. 而後就是一些特性的問題了，好比 input 的全部 type。

2. JS 兼容性，這裏分爲幾種:語法兼容性、特性兼容、函數方法兼容性

   1. 語法兼容性，就是箭頭函數、展開運算符、class 之類的，基本上靠 babel 能解決個差很少
   2. 特性兼容，就是 babel 沒法模擬的，屬於更加底層的能力。Object.defineProperty() 、 Proxy
   3. 函數方法兼容性，就是一些比較新的對象或者方法了，這個能夠經過 babel-polyfill 解決個差很少。好比說 Promise、String.prototype.padStart 之類的。
3. CSS 兼容性，主要就是老版本不支持，通常是依賴瀏覽器本身的實現，經過 Autoprefixer 來加前綴解決。可是屬於那種過低級的瀏覽器就沒法兼容。常見兼容性好比 flex、grid、粘性定位。

nvm

nvm-windows 使用

若是以前使用了 node 能夠先刪除掉

1. 打開 https://github.com/coreybutler/nvm-windows/releases
2. 下載 nvm-setup.zip 包。（我地址是 1.1.7 版本的）
3. 雙擊打開安裝。記住安裝路徑，以後配置環境變量（我電腦很是憨，非得配置到用戶下才識別）。
4. 打開 cmd （shell 工具也能夠，看你本身習慣），cd 到安裝路徑運行 nvm
5. 找一個合適版本的 node。我使用的是 https://nodejs.org/dist/v10.20.1/

6. 使用 nvm 安裝對應版本的 nodejs

   # 安裝 10.20.1 版本
    nvm install 10.20.1
    # 切換版本爲 10.20.1
    nvm use 10.20.1
    # 查看 node 版本
    node -v
    # 切換資源源
    nvm npm_mirror https://npm.taobao.org/mirrors/npm/

微信公衆號：前端linong

參考文獻

1. 前端培訓目錄、前端培訓規劃、前端培訓計劃
2. vue-cli 官網
3. vue-cli 文章