現在在瀏覽器中輸入http://localhost:8083，可以看到初始的“Welcome to Your Vue.js App”頁面了

目錄結構

├── README.md            專案介紹
├── index.html           入口頁面
├── build              構建指令碼目錄
│   ├── build-server.js         執行本地構建伺服器，可以訪問構建後的頁面
│   ├── build.js            生產環境構建指令碼
│   ├── dev-client.js          開發伺服器熱過載指令碼，主要用來實現開發階段的頁面自動重新整理
│   ├── dev-server.js          執行本地開發伺服器
│   ├── utils.js            構建相關工具方法
│   ├── webpack.base.conf.js      wabpack基礎配置
│   ├── webpack.dev.conf.js       wabpack開發環境配置
│   └── webpack.prod.conf.js      wabpack生產環境配置
├── config             專案配置
│   ├── dev.env.js           開發環境變數
│   ├── index.js            專案配置檔案
│   ├── prod.env.js           生產環境變數
│   └── test.env.js           測試環境變數
├── mock              mock資料目錄
│   └── hello.js
├── package.json          npm包配置檔案，裡面定義了專案的npm指令碼，依賴包等資訊
├── src               原始碼目錄  
│   ├── main.js             入口js檔案
│   ├── app.vue             根元件
│   ├── components           公共元件目錄
│   │   └── title.vue
│   ├── assets             資源目錄，這裡的資源會被wabpack構建
│   │   └── images
│   │      └── logo.png
│   ├── routes             前端路由
│   │   └── index.js
│   ├── store              應用級資料（state）
│   │   └── index.js
│   └── views              頁面目錄
│       ├── homePage.vue
│       └── notfound.vue
├── static             純靜態資源，不會被wabpack構建。
└── test              測試檔案目錄（unit&e2e）
  └── unit              單元測試
      ├── index.js            入口指令碼
      ├── karma.conf.js          karma配置檔案
      └── specs              單測case目錄
          └── Hello.spec.js

在views資料夾下暫時新建三個檔案 homePage.vue和notFound.vue,作為首頁和404頁面

為了快速搭建專案，學習重點知識，這裡引入mint-UI作為UI框架

npm i mint-ui -S

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

import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import App from './App.vue'

Vue.use(MintUI)

在components裡新增3個元件，header-bar,