1. 什麼是Vue-CLI(Command Line Interface)

Vue-cli是Vue官方提供的腳手架工具，預設已經搭建好了一套利用webpack管理vue的專案結構

• node_modules資料夾：儲存了依賴的相關的包

• public資料夾：任何位置在public資料夾的靜態資源都會被簡單的複製，而不經過webpack.你需要通過絕對路徑來指引它們，一般用於儲存一些永遠不會改變的靜態資源或者webpack不支援的第三方庫

• src資料夾：程式碼資料夾

  |---- assets資料夾:儲存專案中自己的一些靜態檔案(圖片/字型等)

  |---- components資料夾:儲存專案中的自定義元件(小元件，公共元件)

  |---- views資料夾:儲存專案中的自定義元件(大元件，頁面級元件，路由級別元件)

  |---- router資料夾:儲存VueRouter相關檔案

  |---- store資料夾:儲存Vuex相關檔案

  |---- App.vue:根元件 （Vue控制的區域）

  |---- main.js入口檔案

vue init webpack projectName

當你在專案內部執行 vue-cli-service 命令時，它會自動解析並載入 package.json 中列出的所有 CLI 外掛。

如需升級全域性的Vue CLI包，請執行：

npm update -g @vue/cli
# 或者
yarn global upgrade --latest @vue/cli
 

專案依賴

上面列出來的命令是用於升級全域性的Vue-CLI。如需升級專案中的 Vue-CLI 相關模組（以 @vue/cli-plugin- 或 vue-cli-plugin- 開頭），請在專案目錄下執行 vue upgrade：

用法： upgrade [options] [plugin-name]

（試用）升級 Vue CLI 服務及外掛

選項：
  -t, --to <version>    升級 <plugin-name> 到指定的版本
  -f, --from <version>  跳過本地版本檢測，預設外掛是從此處指定的版本升級上來
  -r, --registry <url>  使用指定的 registry 地址安裝依賴
  --all                 升級所有的外掛
  --next                檢查外掛新版本時，包括 alpha/beta/rc 版本在內
  -h, --help            輸出幫助內容
 

vue的模板template下只能有一個最外層的包裹元素

全域性樣式與區域性樣式：對單個.vue檔案，<style scoped>是區域性樣式。<style>是全域性樣式

2. 如何配置Vue-CLI建立專案的webpack配置

預設情況下通過Vue-CLI建立的專案已經自動給我們配置好了webpack.但是有時候預設的配置可能不能滿足我們的需求，例如我們想修改輸出目錄的名稱。但是Vue-CLI建立的專案裡又沒有webpack配置檔案，我們應該如何修改或增加webpack配置？

• 可以通過新建vue.config.js的方式來修改配置
• 可以通過在vue.config.js中的configureWebpack屬性類新增webpack配置