在前面的两篇《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,步骤同上。