src/

放置原始碼的地方，也就是開發都在這個目錄下進行

├── src/
│    ├── assets/                # 放置靜態檔案
│    │    ├── logo.png
│    ├── components/            # 放置 .vue 元件
│    │    ├──HelloWorld.vue
│    ├── router/                # 配置路由
│    │    ├── index.js         
│    ├── App.vue                # 根組件
│    └── main.js                # 入口檔案

main.js

import Vue from 'vue'
import App from './App'            // 載入 App 元件
import router from './router'      // 載入路由

Vue.config.productionTip = false   //開發環境提示，預設為 false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,                          
  template: '<App/>',              
  components: { App }              
})

main.js 是整個專案的入口檔案，也是 webpack 打包的入口檔案，看到熟悉的 new Vue 了嗎？
#app 就是在這裡綁定的，除此之外還可以看出這裡引用了 App 的元件和 <App/> 的模板，那 App 又是從哪來的呢？往上找就可發現它是透過 import App from './App' 這句程式碼載入的。

** 要使用 .vue 元件的話都記得要先 import！！

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!-- 路由渲染區域 -->
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

App.vue 是專案的入口頁面，<router-view/>則是路由的渲染區域。

.vue 代表的是單一元件檔案 (single-file components)，通常分成三部分：<template>、<script>、<style>，需要經由 webpack 等工具編譯成 js 才能使用。由於 Vue-cli 主要是用來開發大型應用程式，當架構變複雜時，就不太適合在同一個檔案裡面定義及引用組元件，因此在 Vue-cli 裡就把它拉出來變成單一的 .vue 檔案。

router/ index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'  // 載入 HelloWorld 元件，命名為 HelloWorld

Vue.use(Router)  // 告訴 Vue 要使用路由

export default new Router({
  routes: [
    {
      path: '/',               // 設定路由路徑
      name: 'HelloWorld',      // 設定路由名稱
      component: HelloWorld    // 掛載元件
    }
  ]
})

這支是配置路由的檔案，預設路徑為'/'（首頁），對應元件為 HelloWorld，HelloWord 由import載入並定義名稱，所以當我們輸入 http://localhost:8080 時就渲染 HelloWorld 這個元件；依此類推，當需要設置多個路由時，記得必須先import組件，再配置路由。

components /

components/ 是放置所有元件的資料夾，.vue如之前所述就是單一元件檔案，舉例來說：頁面中有個搜索框，可能在很多頁面都會用到，將搜索框變成元件後，就可以一直重複利用，不用一再編寫，這就是元件化的基本概念。

assets /

assets/ 是放置靜態資源的資料夾，元件會使用到的圖片、js、css 都可放在這個檔案裡，需特別注意的是，這裡檔案是會被 webpack 打包的，所以要使用相對路徑./assets/[filename]，如果不想被打包就要放到 static/ 的資料夾下。