初探element+vue+vue-router

基本步驟先准備好

 npm install -g vue-cli
npm init webpack 
cnpm i element-ui -S

修改/src/main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from '_element-ui@2.10.1@element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false
Vue.use(ElementUI)

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

修改App.vue

<template>
  <div id="app">
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </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>

安裝側邊菜單欄

//NavMenu
<template>
    <div>
        <el-row class="tac">
            <el-col :span="24">
                <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                unique-opened
                router
                background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                    <el-submenu index="1">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>導航一</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="1-1">選項1</el-menu-item>
                        <el-menu-item index="1-2">選項2</el-menu-item>
                        <el-menu-item index="1-3">選項3</el-menu-item>
                        <el-menu-item index="1-4">選項4</el-menu-item>
                    </el-menu-item-group>
                    </el-submenu>

                    <el-submenu index="2">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>導航二</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="2-1">選項1</el-menu-item>
                        <el-menu-item index="2-2">選項2</el-menu-item>
                        <el-menu-item index="2-3">選項3</el-menu-item>
                        <el-menu-item index="2-4">選項4</el-menu-item>
                    </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-col>
    </el-row>
    </div>
</template>
<script>
export default {
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

這個時候頁面效果如下

import NavMenu from '@/components/NavMenu'中@的意思
在build/webpack.base.conf.js中有如下代碼, alias就是起別名，@符號就是代表src路徑，
所以@/components/NavMenu就是src/components/NavMenu。 這樣webpack就知道如何引入文件了。
這樣做的好處是不必到處去寫src了。

 resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },

側邊菜單欄進階
我們需要的功能：

每次只能展開一個一級菜單
每次點擊一個二級菜單可以自動改變路由，跳轉到對應的組件
由於菜單在路由中也會使用，所以最好抽象出來，做成一個配置文件
第1點和第二點比較好搞，Element上已經有配置文檔:

unique-opened: 是否只保持一個子菜單的展開
router: 是否使用 vue-router 的模式，啟用該模式會在激活導航時以 index 作為 path 進行路由跳轉
添加一個暫時的路由：修改main.js
每次增加一個菜單都要寫點html是不能忍的，能用js的，就別用html。
在src目錄下創建一個config目錄，目錄下創建一個menu-config.js 文件：
外層的數組代表一級菜單，內層sub數組代表二級菜單。

//menu-config.js
module.exports = [{
  name: '基礎',
  id: 'basic',
  sub: [{
    name: 'Layout布局',
    componentName: 'BasicLayout'
  }, {
    name: 'Container布局容器',
    componentName: 'BasicContainer'
  }]
},
{
  name: 'Form',
  id: 'Form',
  sub: [{
    name: 'Radio單選框',
    componentName: 'FormRadio'
  }, {
    name: 'Checkbox多選框',
    componentName: 'FormCheckbox'
  }]
}]

在NavMenu.vue中引入這個文件，並使用v-for循環去渲染這個菜單：

//NavMenu.vue
<template>
  <el-row class="tac">
    <el-col :span="24">
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        unique-opened
        router
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-submenu v-for="item in menu" :index="item.id" :key="item.id">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span v-text="item.name"></span>
          </template>
          <el-menu-item-group
            class="over-hide"
            v-for="sub in item.sub"
            :key="sub.componentName"
          >
            <el-menu-item index="sub.componentName" v-text="sub.name"></el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-col>
  </el-row>
</template>

<script>
import menu from '@/config/menu-config'
export default {
  data () {
    return {
      menu: menu
    }
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

這里要說明一下，我給二級菜單加上了over-hide類，二級菜單在展開時，有點溢出父元素了。
打開瀏覽器看看, 這時候菜單已經是根據配置文件渲染的了。

添加header
在componets文件夾下創建一個Header.vue, 並在App.vue中引入，
這時候打開瀏覽器看看, 是不是已經好看一點了。但是body有邊框，不好看啊

再次美化
使用css reset Normalize.css
使用font-awesome vue-awesome圖標庫
安裝Normalize.css, vue-awesome

npm install normalize.css -D
npm install vue-awesome -D

修改main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import 'element-ui/lib/theme-chalk/index.css'
import ElementUI from 'element-ui'
import 'vue-awesome/icons'
import Icon from 'vue-awesome/components/Icon'
Vue.use(ElementUI)
Vue.component('icon', Icon)
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

//mormalize.css我引用了沒有作用就刪除了

組件路由與懶加載
新建這四個組件

//BasicContainer.vue
<template>
    <div>
        這是:container布局容器
    </div>
</template>
<script>
export default {
  name: ' BasicContainer'
}
</script>

//BasicLayout
<template>
    <div>
        這是Layout布局
    </div>
</template>
<script>
export default {
  name: 'BasicLayout'
}
</script>

//FormCheckbox
<template>
    <div>
        這是:checkbox多選框
    </div>
</template>
<script>
export default {
  name: 'FormCheckbox'
}
</script>

//FormRadio
<template>
    <div>
        這是radio單選框
    </div>
</template>
<script>
export default {
  name: 'FormRadio'
}
</script>

注意：如果您使用的是 Babel，你將需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正確地解析語法。
也就是說，你要先安裝syntax-dynamic-import, 不然懶加載根本不行。

cnpm install --save-dev babel-plugin-syntax-dynamic-import

修改route/index.js文件

import Vue from 'vue'
import Router from 'vue-router'
import menus from '@/config/menu-config'

Vue.use(Router)

var routes = []
menus.forEach((item) => {
  item.sub.forEach((sub) => {
    routes.push({
      path: `/${sub.componentName}`,
      name: sub.componentName,
      component: () => import(`@/components/${sub.componentName}`)
    })
  })
})
export default new Router({routes})

運行發現跳轉的路由不能展示出來

本文學習自：https://segmentfault.com/a/1190000012015667