vue--管理后台手把手搭建-----（2）

我们搭建webpack框架，并引入element（搭建框架之前有讲过，从引入element开始）

（1）引入element.ui

         a) cnpm i element-ui -S

         b) 在main.js中引入   

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

        c）测试  在helloword.vue 组建中编写代码

<template>
  <div class="hello">
    <h1>{
  { msg }}</h1>
    <h2>Essential Links</h2>
    <el-button @click="visible = true">按钮</el-button>
    <el-dialog :visible.sync="visible" title="Hello world">
    <p>欢迎使用 Element</p>
  </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      visible: false,
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import url("//unpkg.com/element-ui/lib/theme-chalk/index.css");
</style>

     d)效果如下图：

 （2）任何项目我们都是看到的页面，那么自然我们就得搭建路由，接下来开始搭建动态路由

   个人理解：动态路由主要是加了meta标签，meta标签里的role是用来和该账号应展示的信息（路由）做匹配