一个小白的vue之路（四）——搭建自己的后台管理开发框架（1）

前言：本文我们来一起动手搭建自己的后台管理开发框架，主要目的是为了加深对VUE框架理解与使用。我们在本文中要实现后台管理模板最基本的功能,登陆进入主页，点击主页左侧菜单动态加载右侧内容。本文中会用到几个vue的几个主要插件，只简单介绍其用法，不做深入。另外本文不涉及页面样式只注重功能，在后面的文章中我们会引入element-ui、登陆验证、权限控制等，最终形成一套完整的后台管理模板。

第一步 开始前准备：

涉及的插件：

vue-router：是 Vue.js 官方的路由管理器。
vuex、vuex-persistedstate：每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。vuex-persistedstate是vuex的一个状态持久化插件。
axios:Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。（发起Ajax请求）。
mock.js:生成随机数据，拦截Ajax请求。

所需页面：

login.vue, mainboard.vue , modulelist.vue , userlist.vue

第二步：开搞

创建相关页面：
login.vue:

mainboard.vue:

modulelist.vue:

userlist.vue:

引入vue-router：
router.js

import VueRouter from "vue-router";
import Vue from "vue";
import login from "../views/login.vue";
import mainboard from "../views/mainboard.vue";
import modulelist from "../views/modulelist.vue";
import userlist from "../views/userlist.vue";
Vue.use(VueRouter);
const router = new VueRouter({
    routes:[
        {
            path:"/",
            component:login
        },
        {
            path:"/mainboard",
            component:mainboard,
            children:[
                {
                    path:"modulelist",
                    component:modulelist
                },
                {
                    path:"userlist",
                    component:userlist
                }
            ]
        }
    ]
});

export default router;

引入vuex和vuex-persistedstate:
store.js:

import Vuex from "vuex";
import Vue from "vue";
import createPersistedState from 'vuex-persistedstate';
Vue.use(Vuex);
const store = new Vuex.Store({
    state:{
        modulelist:[]
    },
    mutations:{
        setModuleList(state,list){
            //localStorage.setItem("modulelist",JSON.stringify(list));
           // createPersistedState.setModuleList(list);

            state.modulelist = list;
        }
    },
    plugins:[
        createPersistedState()
    ]
});

export default store;

mock.js:

import Mock from "mockjs";

Mock.mock("/login", "post", {
    username: "zhang",
    rolename: "admin",
    moduleList: [{
            id: 0,
            name: "菜单模块",
            path: "/mainboard/modulelist"
        },
        {
            id: 1,
            name: "用户模块",
            path: "/mainboard/userlist"
        }
    ]
});
Mock.mock("/getaa","get",{aa:20})
Mock.mock("/getModuleList", "get", [{
        id: 0,
        name: "菜单模块",
        path: "/mainboard/modulelist"
    },
    {
        id: 1,
        name: "用户模块",
        path: "/mainboard/userlist"
    }
])

Mock.mock("/getUserList", "get", [{
        id: 0,
        name: "zhang",
        role: "admin"
    },
    {
        id: 1,
        name: "li",
        role: "guest"
    }
])

main.js:

import Vue from 'vue'
import App from './App.vue'
import router from "./config/router.js";
import VueAxios from "vue-axios";
import axios from "axios";
import "./config/mock.js";
import store from "./store/store.js";

Vue.use(VueAxios,axios);
Vue.$http = axios;

Vue.config.productionTip = false

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

ok，完成！当然每个插件都有自己更高级的用法，希望大家去多多学习