vue-cli

1. 什么是 vue-cli

vue-cli（俗稱：vue 腳手架）是 vue 官方提供的、快速生成 vue 工程化專案的工具，
特點：
① 開箱即用
② 基于 webpack
③ 功能豐富且易于擴展
④ 支持創建 vue2 和 vue3 的專案
vue-cli 的中文官網首頁：https://cli.vuejs.org/zh/

2. 安裝 vue-cli

vue-cli 是基于 Node.js 開發出來的工具，因此需要使用 npm 將它安裝為全域可用的工具：

2.1 解決 Windows PowerShell 不識別 vue 命令的問題

默認情況下，在PowerShell 中執行 vue --version 命令會提示如下的錯誤訊息：

解決方案如下：
① 以管理員身份運行 PowerShell
② 執行 set-ExecutionPolicy RemoteSigned 命令
③ 輸入字符 Y ，回車即可

3. 創建專案

vue-cli 提供了創建專案的兩種方式：

4. 基于 vue ui 創建 vue 專案

步驟1：在終端下運行 vue ui 命令，自動在瀏覽器中打開創建專案的可視化面板：

步驟2：在詳情頁面填寫專案名稱：

步驟3：在預設頁面選擇手動配置專案：

步驟4：在功能頁面勾選需要安裝的功能（Choose Vue Version、Babel、CSS 前處理器、使用組態檔）：

步驟5：在配置頁面勾選 vue 的版本和需要的前處理器：

步驟6：將剛才所有的配置保存為預設（模板），方便下一次創建專案時直接復用之前的配置：

步驟7：創建專案并自動安裝依賴包：

vue ui 的本質：通過可視化的面板采集到用戶的配置資訊后，在后臺基于命令列的方式自動初始化專案：

專案創建完成后，自動進入專案儀表盤：

5. 基于命令列創建 vue 專案

步驟1：在終端下運行 vue create demo2 命令，基于互動式的命令列創建 vue 的專案：

步驟2：選擇要安裝的功能：

步驟3：使用上下箭頭選擇 vue 的版本，并使用回車鍵確認選擇：

步驟4：使用上下箭頭選擇要使用的 css 前處理器，并使用回車鍵確認選擇：

步驟5：使用上下箭頭選擇如何存盤插件的配置資訊，并使用回車鍵確認選擇：

步驟6：是否將剛才的配置保存為預設：

步驟7：選擇如何安裝專案中的依賴包：

步驟8：開始創建專案并自動安裝依賴包：

步驟9：專案創建完成：

6. 梳理 vue2 專案的基本結構

7. 分析 main.js 中的主要代碼

8. 在 vue2 的專案中使用路由

在 vue2 的專案中，只能安裝并使用 3.x 版本的 vue-router，
版本 3 和版本 4 的路由最主要的區別：創建路由模塊的方式不同！

8.1 回顧：4.x 版本的路由如何創建路由模塊

8.2 學習：3.x 版本的路由如何創建路由模塊

步驟1：在 vue2 的專案中安裝 3.x 版本的路由：

步驟2：在 src -> components 目錄下，創建需要使用路由切換的組件：

步驟3：在 src 目錄下創建 router -> index.js 路由模塊：

步驟4：在 main.js 中匯入路由模塊，并通過 router 屬性進行掛載：

步驟5：在 App.vue 根組件中，使用 宣告路由的占位符：

組件庫

1. 什么是 vue 組件庫

在實際開發中，前端開發者可以把自己封裝的 .vue 組件整理、打包、并發布為 npm 的包，從而供其他人下載
和使用，這種可以直接下載并在專案中使用的現成組件，就叫做 vue 組件庫，

2. vue 組件庫和 bootstrap 的區別

二者之間存在本質的區別：
? bootstrap 只提供了純粹的原材料（ css 樣式、HTML 結構以及 JS 特效），需要由開發者做進一步的組裝和改造
? vue 組件庫是遵循 vue 語法、高度定制的現成組件，開箱即用

3. 最常用的 vue 組件庫

① PC 端
? Element UI（https://element.eleme.cn/#/zh-CN）
? View UI（http://v1.iviewui.com/）
② 移動端
? Mint UI（http://mint-ui.github.io/#!/zh-cn）
? Vant（https://vant-contrib.gitee.io/vant/#/zh-CN/）

4. Element UI

Element UI 是餓了么前端團隊開源的一套 PC 端 vue 組件庫，支持在 vue2 和 vue3 的專案中使用：
? vue2 的專案使用舊版的 Element UI（https://element.eleme.cn/#/zh-CN）
? vue3 的專案使用新版的 Element Plus（https://element-plus.gitee.io/#/zh-CN）

4.2 在 vue2 的專案中安裝 element-ui

運行如下的終端命令：

開發者可以一次性完整引入所有的 element-ui 組件，或是根據需求，只按需引入用到的 element-ui 組件：
? 完整引入：操作簡單，但是會額外引入一些用不到的組件，導致專案體積過大
? 按需引入：操作相對復雜一些，但是只會引入用到的組件，能起到優化專案體積的目的

4.3 完整引入

在 main.js 中寫入以下內容：

4.4 按需引入

借助 babel-plugin-component，我們可以只引入需要的組件，以達到減小專案體積的目的，
步驟1，安裝 babel-plugin-component：

步驟2，修改根目錄下的 babel.config.js 組態檔，新增 plugins 節點如下：

步驟3，如果你只希望引入部分組件，比如 Button，那么需要在 main.js 中寫入以下內容：

4.5 把組件的匯入和注冊封裝為獨立的模塊

在 src 目錄下新建 element-ui/index.js 模塊，并宣告如下的代碼：

axios 攔截器

1. 回顧：在 vue3 的專案中全域配置 axios

2. 在 vue2 的專案中全域配置 axios

需要在 main.js 入口檔案中，通過 Vue 建構式的 prototype 原型物件全域配置 axios：

3. 什么是攔截器

攔截器（英文：Interceptors）會在每次發起 ajax 請求和得到回應的時候自動被觸發，

4. 配置請求攔截器

通過 axios.interceptors.request.use(成功的回呼, 失敗的回呼) 可以配置請求攔截器，示例代碼如下：

4.1 請求攔截器 – Token 認證

4.2 請求攔截器 – 展示 Loading 效果

借助于 element ui 提供的 Loading 效果組件（https://element.eleme.cn/#/zh-CN/component/loading）
可以方便的實作 Loading 效果的展示：

5. 配置回應攔截器

通過 axios.interceptors.response.use(成功的回呼, 失敗的回呼) 可以配置回應攔截器，示例代碼如下：

5.1 回應攔截器 – 關閉 Loading 效果

呼叫 Loading 實體提供的 close() 方法即可關閉 Loading 效果，示例代碼如下：

proxy 跨域代理

1. 回顧：介面的跨域問題

vue 專案運行的地址：http://localhost:8080/
API 介面運行的地址：https://www.escook.cn/api/users
由于當前的 API 介面沒有開啟 CORS 跨域資源共享，因此默認情況下，上面的介面無法請求成功！

2. 通過代理解決介面的跨域問題

通過 vue-cli 創建的專案在遇到介面跨域問題時，可以通過代理的方式來解決：

① 把 axios 的請求根路徑設定為 vue 專案的運行地址（介面請求不再跨域）
② vue 專案發現請求的介面不存在，把請求轉交給 proxy 代理
③ 代理把請求根路徑替換為 devServer.proxy 屬性的值，發起真正的資料請求
④ 代理把請求到的資料，轉發給 axios

3. 在專案中配置 proxy 代理

步驟1，在 main.js 入口檔案中，把 axios 的請求根路徑改造為當前 web 專案的根路徑：

步驟2，在專案根目錄下創建 vue.config.js 的組態檔，并宣告如下的配置：

注意：
① devServer.proxy 提供的代理功能，僅在開發除錯階段生效
② 專案上線發布時，依舊需要 API 介面服務器開啟 CORS 跨域資源共享