vue+elementui后台管理系统

写了几个vue全家桶 + elementui，随便写写通用的后台管理系统

起步vue-cli脚手架安装，一般store， router脚手架已经弄好了，按需引一个router main.js 中import router from ‘./router’，我卸载src外部创建一个router文件夹下创建index.html入口文件，入口文件名在引入的时候可以省略，在index.html中，先引入 vue，在引入vue-router，由于router是vue全家桶中自身的，所以需要安装vue.app(VueRouter)，并对其实例化mode选择路由模式例如history 在下方配置路由 将其定义在外部命名为routes变量 是一个数组，里面对象就是路由的相关配置 path， 可以设置name 方便后面的函数式编程，同时接收component 可以直接引入 也可以按需引入 import，可以创建view目录下创建vue文件用来写页面例如我这次项目先建一个Home.vue什么的Detail.vue 详细页面 List.vue 列表页面例如图书管理，商品管理，课程管理 首页详细页，列表页都这么写自己定义，vue页面可以用快捷键一键创建，也可可以自己写一个带生命周期的自己常用的在vs code中定义模板，我自定义的快捷键是vue，template script style 就是一个vue页面，template中先随便写点内容 在script中暴露默认接口，创建好之后就可以在router的入口文件中引入新创建的vue文件，component直接写Home了 ，还是按需引入把，将import引入的Home注释掉，在component: () => import('home文件位置')，之后暴露export default 路由实例化对象，如果想要将其显示在页面中 需要在App.vue中使用路由占位符就可以在页面上显示了,实现一个小功能点击button可以切换路由这就用到router-link组件了 router-link包裹dom元素 to 地址 还有一个新的方式是navigate 用的版本较新，之前的未来版本可能会被优化掉

router文件的入口文件

import Vue from 'vue'
import VueRouter from 'vue-router'


// import Home from '../views/Home.vue'

Vue.use(VueRouter)
const routes=[
    {
        path:'/',
        name:'Main',
        component:()=>import ('../views/Main.vue'),
        children:[]
    },
    {
        path:'/login',
        name:'login',
        component:()=>import('../views/Login/login.vue')
    },

    
]
const router=new VueRouter({
    path: '/home',
    mode:'history',
    routes

})
export default router

App.vue