Day57(27)-F:\vs_ai_work\vue-tlias-management

ElementPlus

其中关于icon的配置信息在main.js中

import { createApp } from 'vue'

import App from './App.vue'

import router from './router'

import ElementPlus from 'element-plus'

import 'element-plus/dist/index.css'

import zhCn from 'element-plus/es/locale/lang/zh-cn'

// 引入icon

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

import './assets/main.css'

const app = createApp(App)

app.use(router)

app.use(ElementPlus, {locale: zhCn})

// 注册icon图标

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {

app.component(key, component)

}

app.mount('#app')

Vue Router

Vue Router 是 Vue 官方的客户端路由解决方案。

客户端路由的作用是在单页应用 (SPA) 中将浏览器的 URL 和用户看到的内容绑定起来。当用户在应用中浏览不同页面时，URL 会随之更新，但页面不需要从服务器重新加载。

Vue Router 基于 Vue 的组件系统构建，你可以通过配置路由来告诉 Vue Router 为每个 URL 路径显示哪些组件。

路由器router下面的index

import { createRouter, createWebHistory } from 'vue-router'

import IndexView from '@/views/index/index.vue'

import ClazzView from '@/views/clazz/index.vue'

import DeptView from '@/views/dept/index.vue'

import EmpView from '@/views/emp/index.vue'

import LogView from '@/views/log/index.vue'

import StuView from '@/views/stu/index.vue'

import EmpReportView from '@/views/report/emp/index.vue'

import StuReportView from '@/views/report/stu/index.vue'

import LayoutView from '@/views/layout/index.vue'

import LoginView from '@/views/login/index.vue'

const router = createRouter({

history: createWebHistory(import.meta.env.BASE_URL),

routes: [

{path:'/',

name:'',

component: LayoutView,

redirect:'/index',//重定向

children:[

​ {path:'index',name:'index',component: IndexView},

​ {path:'clazz',name:'clazz',component: ClazzView},

​ {path:'dept',name:'dept',component: DeptView},

​ {path:'emp',name:'emp',component: EmpView},

​ {path:'log',name:'log',component: LogView},

​ {path:'stu',name:'stu',component: StuView},

​ {path:'empReport',name:'empReport',component: EmpReportView},

​ {path:'stuReport',name:'stuReport',component: StuReportView}

]},

{path: '/login',name: 'login',component: LoginView}

// {

// path: '/about',

// name: 'about',

// component: () => import('../views/AboutView.vue')

// }

]

})

export default router