1、什么是 vue-cli
- vue-cli（俗稱：vue 腳手架）是 vue 官方提供的惹想、快速生成 vue 工程化項(xiàng)目的工具。
-
特點(diǎn)：
① 開(kāi)箱即用
② 基于 webpack
③ 功能豐富且易于擴(kuò)展
④ 支持創(chuàng)建 vue2 和 vue3 的項(xiàng)目
2督函、安裝 vue-cli
-
vue-cli 是基于 Node.js 開(kāi)發(fā)出來(lái)的工具嘀粱，因此需要使用 npm 將它安裝為全局可用的工具：
2.1 解決 Windows PowerShell 不識(shí)別 vue 命令的問(wèn)題
-
默認(rèn)情況下，在PowerShell 中執(zhí)行 vue --version 命令會(huì)提示如下的錯(cuò)誤消息：
-
解決方案如下：
① 以管理員身份運(yùn)行 PowerShell
② 執(zhí)行 set-ExecutionPolicy RemoteSigned 命令
③ 輸入字符 Y 辰狡，回車即可
3锋叨、創(chuàng)建項(xiàng)目
-
vue-cli 提供了創(chuàng)建項(xiàng)目的兩種方式：
4、基于 vue ui 創(chuàng)建 vue 項(xiàng)目
-
步驟1：在終端下運(yùn)行vue ui 命令宛篇，自動(dòng)在瀏覽器中打開(kāi)創(chuàng)建項(xiàng)目的可視化面板：
-
步驟2：在詳情頁(yè)面填寫項(xiàng)目名稱：
-
步驟3：在預(yù)設(shè)頁(yè)面選擇手動(dòng)配置項(xiàng)目：
-
步驟4：在功能頁(yè)面勾選需要安裝的功能（Choose Vue Version娃磺、Babel、CSS 預(yù)處理器叫倍、使用配置文件）：
-
步驟5：在配置頁(yè)面勾選 vue 的版本和需要的預(yù)處理器：
-
步驟6：將剛才所有的配置保存為預(yù)設(shè)（模板）偷卧，方便下一次創(chuàng)建項(xiàng)目時(shí)直接復(fù)用之前的配置：
-
步驟7：創(chuàng)建項(xiàng)目并自動(dòng)安裝依賴包：
-
vue ui 的本質(zhì)：通過(guò)可視化的面板采集到用戶的配置信息后，在后臺(tái)基于命令行的方式自動(dòng)初始化項(xiàng)目：
-
項(xiàng)目創(chuàng)建完成后吆倦，自動(dòng)進(jìn)入項(xiàng)目?jī)x表盤：
5听诸、基于命令行創(chuàng)建 vue 項(xiàng)目
-
步驟1：在終端下運(yùn)行vue create demo2 命令，基于交互式的命令行創(chuàng)建 vue 的項(xiàng)目：
-
步驟2：選擇要安裝的功能：
-
步驟3：使用上下箭頭選擇 vue 的版本蚕泽，并使用回車鍵確認(rèn)選擇：
-
步驟4：使用上下箭頭選擇要使用的 css 預(yù)處理器晌梨，并使用回車鍵確認(rèn)選擇：
-
步驟5：使用上下箭頭選擇如何存儲(chǔ)插件的配置信息，并使用回車鍵確認(rèn)選擇：
-
步驟6：是否將剛才的配置保存為預(yù)設(shè)：
-
步驟7：選擇如何安裝項(xiàng)目中的依賴包：
-
步驟8：開(kāi)始創(chuàng)建項(xiàng)目并自動(dòng)安裝依賴包：
-
步驟9：項(xiàng)目創(chuàng)建完成：
6赛糟、梳理 vue2 項(xiàng)目的基本結(jié)構(gòu)
7派任、 分析 main.js 中的主要代碼
8、在 vue2 的項(xiàng)目中使用路由
- 在 vue2 的項(xiàng)目中璧南，只能安裝并使用3.x 版本的 vue-router掌逛。
- 版本 3 和版本 4 的路由最主要的區(qū)別：創(chuàng)建路由模塊的方式不同
8.1 回顧：4.x 版本的路由如何創(chuàng)建路由模塊
8.2 學(xué)習(xí)：3.x 版本的路由如何創(chuàng)建路由模塊
-
步驟1：在 vue2 的項(xiàng)目中安裝 3.x 版本的路由：
-
步驟3：在 src 目錄下創(chuàng)建 router -> index.js 路由模塊：
-
步驟4：在 main.js 中導(dǎo)入路由模塊，并通過(guò) router 屬性進(jìn)行掛載：
-
步驟5：在 App.vue 根組件中司倚，使用 <router-view> 聲明路由的占位符：
