1、用vscode 開啟腳手架專案的資料夾，專案結構如下：

• node_modules目錄：這是專案依賴模組的目錄，使用npm install來安裝的依賴模組全部放到這裡，一般不用管。
• build目錄：這是關於專案構建資訊的目錄，裡面主要是webpack構建專案的一些配置。
config目錄：
• 基礎配置資訊在index.js
• 開發環境下的配置資訊：dev.env.js
• 線上環境下的配置資訊：prod.env.js
• static目錄：存放專案的靜態資原始檔，這個目錄是開放訪問的
• package.json檔案包含了專案依賴模組的列表。
• package-lock.json檔案包含了專案依賴模組的一些限制資訊（限制版本號，限制下載地址，限制雜湊值）
• index.html檔案：專案的首頁檔案
• src目錄：是專案的原始碼目錄(主要些程式碼的地方)
  • main.js：是專案的入口檔案。
  • router目錄：用於設定vue路由資訊的目錄
  • store目錄：用於設定vuex資料管理的目錄
  • App.vue檔案：是專案的根元件。
  • components目錄：元件相關的目錄，單檔案元件一般都存放在這裡
  • assets目錄：靜態資源存放處【與static的區別是，static會原封不動地構建起來，而assets會被webpack進行處理，路徑什麼的webpack會自動管理好的】

2、重要檔案

• main.js 配置了一個根例項，
• index.html：main.js裡面的根例項指定了一個元素，那這個根例項指定的元素便是首頁的根節點了。
• App.vue：main.js 為index.html匯入了一個叫App的元件，渲染的過程是將<template>中的<App/>渲染到div中，而App是個元件，所以會把元件的內容顯示到首頁中
• router-view App.vue裡面定義了一個router-view的元素，這個元素用於路由的顯示。它會裝載當前路由所定義的內容。與iframe類似的作用,他的定義在router/index.js下。

• 當存在多個router-view時，最好是使用name作為區分，不然的話，渲染的順序由於級別的原因產生混亂

•   <router-view name="
   
  a"></router-view>
    <router-view name="b"></router-view>
  
  routes: [
      {
        path: '/',
        name: 'first',
        components: {
          b: third,
          a: second
        }
      }