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中使用<router-view></router-view>路由占位符就可以在頁面上顯示了,實現一個小功能點擊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

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

<script>

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

<style>
html,body{
  margin: 0;
  padding: 0;
}
#app {
  height: 100vh;
}
</style>