在前面的兩篇《vue新建專案(一)vue-cli新建模板專案》 和 《vue新建專案(二)安裝element-ui》 中，我們已經新建一個vue專案且安裝了一套UI，但是這個只是一個頁面，那麼怎麼新建一個單頁應用(SPA)呢。
這裡我們需要做一點改造。
步驟：
1.在src/components 下面新建一個目錄common ，並且在這個目錄裡面新建一個.vue檔案：Home.vue
2.在src/components/common 新建一個.vue檔案：Sidebar.vue
3.在Home.vue裡面增加如下程式碼：

<template>
    <div class
 
="wrapper">
        <v-sidebar></v-sidebar>
        <div class="content">
            <transition name="move" mode="out-in"><router-view></router-view></transition>
        </div>
    </div>
</template>

<script>
    import vSidebar from './Sidebar.vue'
 
;
    export default {
        data() {
            return {

            }
        },
        components:{
            vSidebar
        }
    }
</script>

4.在Sidebar.vue裡面增加如下程式碼：

<template>
    <div>
        <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen"
 
 @close="handleClose">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-message"></i>導航一</template>
            <el-menu-item-group>
              <template slot="title">分組一</template>
              <el-menu-item index="1-1">選項1</el-menu-item>
              <el-menu-item index="1-2">選項2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分組2">
              <el-menu-item index="1-3">選項3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">選項4</template>
              <el-menu-item index="1-4-1">選項1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="2"><i class="el-icon-menu"></i>導航二</el-menu-item>
          <el-menu-item index="3"><i class="el-icon-setting"></i>導航三</el-menu-item>
        </el-menu>
    </div>
</template>
<script>
   export default {
          data() {
            return {

            }
      },
      computed:{
         onRoutes(){
            return this.$route.path.replace('/','');
         }
      },
    }
</script>

<style scoped></style>

5.修改src/router/index.js 檔案，這個index.js檔案是路由配置檔案；修改後：

export default new Router({
  routes: [
    {
       path: '/home',
       component: resolve => require(['../components/common/Home.vue'], resolve),
    }
  ]
})

接著我們執行npm run dev 但是專案會報錯且不能正確執行，這是因為在《vue新建專案(一)vue-cli新建模板專案》 我們使用ESLint這個程式碼檢查工具，這裡我們需要關閉它。找到build/webpack.base.conf.js 在webpack.base.conf.js找到：

{
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [resolve('src'), resolve('test')],
  options: {
    formatter: require('eslint-friendly-formatter')
  }
},

然後註釋掉他們就OK了。
專案儲存後，我們在瀏覽器位址列輸入：http://localhost:8080/#/home
就可以看見效果了。

前提是修改了App.vue這個檔案，修改後：

<template>
  <div id="app">
    <!--<img src="./assets/logo.png">-->
    <router-view></router-view>
  </div>
</template>

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

<style>
    * {
        margin: 0px;
        padding: 0px;
    }
    #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>

1. 在src/components/common/Sidebar.vue 這個Sidebar.vue最外面的一個div標籤裡增加一個class="sidebar"的類；然後增加樣式：

<style scoped>
    .sidebar{
        width: 180px;
        float: left;
    }
</style>

7.在src/components/common/Home.vue 這個Home.vue這裡有一個content的類，這裡我們增加如下樣式：

<style scoped>
    .content{
        width: calc(100% - 180px);
        float: left;
        position: relative;
    }
</style>

8.增加一個子頁面
新建一個目錄src/components/pages，在這個目錄裡面增加一個.vue檔案page1.vue；
在這個vue檔案裡面加上演示程式碼

<template>
    <div>
        <h1>我是第一個頁面</h1>
    </div>
</template>

<script></script>

<style></style>

9.增加路由，在src/router/index.js 這個index.js檔案裡面修改為：

export default new Router({
  routes: [
    {
       path: '/home',
       component: resolve => require(['../components/common/Home.vue'], resolve),
       children:[
            {
                path: '/page1', // 第一個頁面
                component: resolve => require(['../components/pages/page1.vue'], resolve)
            },
       ]
    }
  ]
})

然後在瀏覽器中輸入http://localhost:8080/#/page1 我們就可以看見效果了：

10.增加第二個頁面page2,步驟同上。