1.使用Vue+Element UI创建一个后台管理系统

1.使用cue-cli 命令创建项目

vue init webpack vue-demo

2.导入Element UI

npm i element-ui -S

3.导入vue-x

npm install vuex -save

3.1 在项目根目录下创建store文件，并在store文件下创建index.js ,内容如下

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)


const store = new Vuex.Store({

})

export default store

3.2 在main.js里引入store对象

// 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 store from './store'
Vue.config.productionTip = false

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

3.3精简App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
  export default {
    name: 'App'
  }
</script>

<style>
</style>

3.4 删除router/index.js的默认路由相关信息，并修改如下

import Vue from 'vue'
import Router from 'vue-router'
//import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)


export const constantRouterMap = [
  {path:'/login',component: () => import('@/views/login/index'),hidden : true},
  {
    path:'/',
    component: () => import('@/views/layout/Layout')
  }
]

export default new Router({
  routes:constantRouterMap
})

并在根目录下新建views文件夹
如下：

image.png

Layout.vue和index.vue里的内容随便填写
然后启动项目，如下: 测试和首页随便点击，可以查看切换效果

image.png