Vue引入Element导航栏

引入

index.html ：定义一个挂载点id=‘app‘                                                                                main.js:通过注册组件app，用app的内容替换id=‘app‘挂载点的内容。

 app.vue：app内，注册组件index，并显示在div中。<index/>                                  index.vue:组件index中，左侧为导航栏。右侧为主区域，显示主题内容。

   此时的路由根本没有启用，所以上面main.js中，完全可以注释掉router语句。运行后，如下图 。

在index.vue中，如果希望点击展示相应的内容，代码的el-main中添加以下部分：

<el-main>
    <router-view></router-view>
</el-main>

再配合el-menu router，即el-menu中添加router属性，即可实现点击应用application时，出现应用管理。当然，此时路由已配置好才行。此时的index.js

import Vue from ‘vue‘
import Router from ‘vue-router‘
import Index from ‘@/components/index‘

import Application from ‘@/components/Application‘

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: ‘/‘,
      //name: ‘HelloWorld‘,
      component: Index
    },
     {
      path:‘/application‘,
      component:Application
    }   
  ]
})

此时的页面如下：  http://localhost:8080/#/application。可以看到，地址栏的参数为application。

 再比如，要在首页中显示表格：先在el-menu-item-group中添加index=‘Home‘。 然后，配置routes数组(同时import Home from ‘@/components/Home‘)。

 最后，在Home.vue中，将el-table的代码复制到template中，将数据复制到return中，即可在首页中显示表格。

总结：在el-menu中添加router，可以响应路由，即在地址栏中实现以el-menu-item中的index为path进行地址跳转。

而此时的index，比如Home，在router下的index.js中，已经通过routes数组，配置为‘/home’，即当前目录下的home，组件对应为Home.vue。

所以，点击菜单Home，即可跳转到Home.vue组件，此时在Home.vue组件中，将想要展示的内容写好，即可展示，比如展示table，到element中复制table的代码即可。

=================================

cnpm i echars -s

安装Echarts。

引入，两种方式，一是哪个文件需要，就在哪里通过import引入，另一种方式，通过原型。

//通过原型，添加到原型对象中的属性
Vue.prototype.$echarts = echarts;

比如Home.vue中引入时：

var myChart = this.$echarts.init(document.getElementById(‘echart1‘));

Vue引入Element导航栏

原文：https://www.cnblogs.com/lhj1168/p/12745190.html