自從用餓了么框架重構(gòu)項(xiàng)目以來(lái)，遇到 很多問題，我都有一一記錄下來(lái)，現(xiàn)在特喜歡這個(gè)框架，說實(shí)話，如果你是用了vue這個(gè)技術(shù)棧的話，一定要用餓了么的pc端框架哦，遇到問題的時(shí)候在網(wǎng)上百度一下，就能找到解決方案，還有很多社區(qū)可以討論，社區(qū)文檔都比較成熟，很容易上手~~

Element UI手冊(cè)：https://cloud.tencent.com/developer/doc/1270
github地址：https://github.com/ElemeFE/element

vue2.0官方網(wǎng)站：http://caibaojian.com/vue/guide/installation.html
element-ui官方網(wǎng)站：https://element.eleme.cn/#/zh-CN

1：components
新建頁(yè)面

圖片.png

2：打開app.vue
寫代碼

<template>
  <div>
    <el-col :span="2">
      <el-menu
        :default-active="this.$route.path"
        router
        mode="horizontal"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <el-menu-item v-for="(item, i) in navList" :key="i" :index="item.name">
          <template slot="title">
            <i class="el-icon-s-platform"></i>
            <span> {{ item.navItem }}</span>
          </template>
        </el-menu-item>
      </el-menu>
    </el-col>

    <router-view class="menu-right" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      navList: [
        { name: "/views/chip", navItem: "地圖碎片" },
        { name: "/views/device", navItem: "地圖設(shè)備" },
        { name: "/views/params", navItem: "地圖參數(shù)" },
        { name: "/views/picture", navItem: "地圖圖片" },
      ],
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style>
.menu-right {
  margin-left: 200px;
}
</style>

3:路由index.js

import Vue from 'vue'
import Router from 'vue-router'
import Chip from '@/views/chip'
import HelloWorld from '@/components/HelloWorld'
import Device from '@/views/device'
import Params from '@/views/params'
import Picture from '@/views/picture'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
     {
      path: '/views/chip',
      name: 'chip',
      component: Chip
    }, {
      path: '/views/device',
      name: 'device',
      component: Device
    },
     {
      path: '/views/params',
      name: 'params',
      component: Params
    },{
      path: '/views/picture',
      name: 'picture',
      component: Picture
    }
  ]
})

4：新頁(yè)面的內(nèi)容,我寫的比較簡(jiǎn)單，需要自己寫下功能需求所在的代碼
picture.vue

<template>  
    <div>
    我是picture頁(yè)面
    </div>  
</template>
<script>
</script>
<style>
</style>

5：效果就可以看了