1.腳手架的作用

在一個專案中會存在許多的配置，比如是否需要eslint、單元測試、babel功能等，如果這些配置全部都手動編寫的話會很浪費時間，此時就需要有工具可以幫我們自動的生成這些配置，我們只需要在它生成好的目錄結構中編寫業務程式碼即可
每種框架基本都會存在對應的腳手架工具，vue的腳手架工具即為VueCLI，它的官網為https://cli.vuejs.org/zh/

2.安裝腳手架

首先使用npm安裝對應的包

npm install -g @vue/cli

安裝完成後它會給命令列中新增vue命令，可以直接通過此命令進行專案的快速構建
使用vue命令檢視vue cli是否安裝成功

如果不指定版本則預設安裝最新版

3.hello world

安裝完成之後通過vue create或vue ui命令建立專案，區別在於使用vue ui命令會通過視覺化的方式進行建立

vue create

首先使用vue create進行建立

vue create helloworld1

此處需要選擇使用哪種模板進行建立，通過上下箭頭選擇，按回車鍵確定，本次使用vue3進行建立
vuecli3和vuecli2的目錄結構差別比較大，相對來說vuecli3的目錄結構更加精簡，它將許多的配置檔案都隱藏起來了
確認之後需要等待幾分鐘

當安裝完成後專案就建立好了

預設vuecli3建立好後會自動安裝依賴包，如果沒有可以手動安裝
接著進入到package.json所在的目錄，執行npm install安裝依賴包


按照提示啟動服務

在頁面上訪問此地址

出現此介面就說明專案已經可以正常使用了，我們接下來要做的就是在特定的目錄下寫業務程式碼了

vue ui

在命令列中輸入vue ui後會自動啟動服務並彈出介面


選擇路徑後點擊建立按鈕開始建立專案

設定專案名和包管理器

此處和命令列一樣，命令列建立時使用了第二個，本次使用第三個，它們之間的區別在於前兩個使用了預設的配置，後面的可以自己指定需要哪些配置

將對應的功能置為可用，那麼專案建立好之後就可以直接使用這些功能了

此處的配置項是根據上步中選擇的功能動態出現的

將要建立專案時會提示是否將此次的配置儲存為檔案，下次再建立專案時就可以直接使用此次自定義的配置了

當確定以後就開始下載模板和依賴包了，這個過程和命令列一樣，需要等待一段時間

專案建立好以後，後續的步驟和命令列相同，直接執行命令即可執行專案

4.目錄結構

• node_modules 依賴包下載後存放的位置，只對當前專案生效
• public 存放一些靜態的公共資源，比如圖示和html頁面
• src/assets 存放圖片、css樣式等資源
• src/components 公共元件存放位置，此處的元件可以放在任意專案中直接使用
• src/router 添加了vue-router功能後一般會建立該目錄，用於存放路由資訊
• src/store 添加了vuex狀態管理功能後建立該目錄，用於存放狀態的一些資訊
• src/views 業務程式碼編寫的地方
• src/App.vue 根元件，用於整合其他元件的地方
• src/main.js 主要的配置js，配置一些公共的東西
• .browserslistrc 限制瀏覽器的版本
• babel.config.js babel功能的配置檔案
• package.json 專案主要的描述檔案，包括了所有依賴和指令碼
• package-lock.json 用於鎖定版本
• vue.config.js 如果不需要自定義配置，則沒有此檔案，如果想進行自定義，則需要自己建立該檔案

5.runtimeonly和runtimecompiler的區別

簡單概括就是runtimeonly比runtimecompiler體積更小，執行速度更快，因為only不需要編譯，直接使用函式掛載的方式

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

此處的render就是使用了only的方式直接掛載

6.vuecli2和vuecli3的區別

1. 建立專案的命令不同
2. 生成的專案結構不同
3. vuecli3相對於vuecli2隱藏了許多的配置檔案，目錄更精簡