1. 程式人生 > >vue新建專案(三)構建單頁應用(SPA)

vue新建專案(三)構建單頁應用(SPA)

在前面的兩篇《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.jswebpack.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,步驟同上。