从零开始搭建 VUE + Element UI后台管理系统框架 vue2 cli3 ///first

参考：https://www.javanx.cn/20190318/vue-elementui-admin/

1.vue create testadmin 选择vue2

2.npm run dev package.js serve改成dev

3.设置自动打开，vue.config.js devServer:{host: "127.0.0.1",open:true}

4.cnpm i element-ui -S

5.main.js修改

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

6.新建src/router/index.js，main.js修改

import router from './router'

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

7.新建src/page/layout.vue，复制粘贴elementui Container容器代码

8.cnpm isntall vue-router --save

vue-router版本过高报错
cnpm install vue-router@3.2.0

9.修改路由 src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/page/layout'
Vue.use(Router)
export default new Router({
  mode: 'history', // 去掉url中的#
  routes: [
    {
      path: '/',
      name: 'Layout',
      component: Layout
    }
  ]
})

10.修改App.vue

11.修改layout.vue 复制elementui导航菜单和侧边栏

12.layout.vue 样式

.el-container{
  position: absolute; 
  width: 100%; 
  top: 0px ; 
  left: 0 ; 
  bottom: 0;
}
.el-header{
  padding: 0;
  z-index: 1000;
}
// header菜单需要靠右的添加.fr即可(如：消息中心)
.el-header .fr{
  float: right;
}
.el-header .el-menu{
  border-bottom: none;
}
.el-aside, .el-main{
  padding-top: 60px;
}
.el-aside{
  background: #545c64;
}
.el-aside .el-menu{
  border-right: none;
}

13.修改app.vue样式

*{
  padding: 0;
  margin: 0;
}
html,body{
  width: 100%;
  height: 100%;
}
#app {
  height: 100%;
}

14.新建page/main.vue

15.新建page/user.vue

16.修改layout.vue

17.修改router/index.js

  routes: [
    {
      path: '/',
      name: 'Layout',
      component: Layout,
      children:[{
        path:'/',
        name:'Main',
        component:AMain
      },{
        path:'/user',
        name:'User',
        component:AUser
      }]
    },
  ]

18.ok大体框架出来了，大概是这样