主要介绍了部门管理页面、路由、打包部署！！！
文章目录
前言
部门管理页面
Vue路由
打包部署
打包
部署
总结
前言
主要介绍了部门管理页面、路由、打包部署！！！
部门管理页面
<template><div><el-container style="height: 700px; border: 1px solid #eee"><el-header style="font-size: 40px; background-color: rgb(238, 241, 246)">tlias：智能辅助学习系统</el-header><el-container><el-aside width="200px"><el-menu :default-openeds="['1', '3']"><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>系统信息管理</template><el-menu-item index="1-1"><router-link to="/dept">部门管理</router-link></el-menu-item><el-menu-item index="1-2"><router-link to="/emp">员工管理</router-link></el-menu-item></el-submenu></el-menu></el-aside><el-main><el-table :data="tableData" style="width: 100%"><el-table-column prop="name" label="名称" width="180"></el-table-column><el-table-column prop="updatetime" label="最后操作时间" width="210"></el-table-column><el-table-column prop="operate" label="操作"><el-button type="primary" size="mini">编辑</el-button><el-button type="danger" size="mini">删除</el-button></el-table-column></el-table></el-main></el-container></el-container></div>
</template><script>
export default {data() {return {tableData: [{id: 1,name: "学工部",updatetime: "2010-01-01 12:00:00"}, {id: 2,name: "教研部",updatetime: "2010-01-01 12:00:00"}, {id: 3,name: "就业部",updatetime: "2010-01-01 12:00:00"}, {id: 4,name: "人事部",updatetime: "2010-01-01 12:00:00"}, {id: 5,name: "行政部",updatetime: "2010-01-01 12:00:00"}]}},methods: {}
}</script><style></style>
<router-link to="/dept">部门管理</router-link>和<router-link to="/emp">员工管理</router-link>: 使用 Vue Router 的<router-link>组件，使得点击菜单项可以进行路由导航到/dept和/emp路径。<el-table :data="tableData" style="width: 100%">: Element UI 的表格组件，:data="tableData"绑定了表格的数据源为tableData变量，:style="width: 100%"设置表格宽度为 100%。<el-table-column prop="name" label="名称" width="180">: 表格列组件，prop属性指定数据字段，label属性设置列名，width属性设置列宽度。<el-table-column prop="updatetime" label="最后操作时间" width="210">: 另一列，显示最后操作时间。
主要实现了一个基本的管理系统界面，包括顶部标题、侧边栏菜单（包含系统信息管理的子菜单）、主内容区域（包含一个表格，用于显示名称、最后操作时间和操作按钮）。通过 Vue Router 和 Element UI 的组件，实现了路由导航和响应式的页面布局。
Vue路由
介绍： Vue Router 是 Vue 的官方路由。
组成：
- VueRouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件
- <router-link>：请求链接组件，浏览器会解析成<a>
- <router-view>：动态视图组件，用来渲染展示与路由路径对应的组件
- 安装 （创建Vue项目是可选择）
npm install vue-router@3.5.1
- 定义路由
import Vue from 'vue'
import VueRouter from 'vue-router'import EmpView from '@/views/tlias/EmpView.vue'Vue.use(VueRouter)const routes = [{path: '/',name: 'home',component: EmpView},{path: '/emp',name: 'Emp',component: EmpView},{path: '/dept',name: 'Dept',component: ()=> import ('@/views/tlias/DeptView.vue')},
]const router = new VueRouter({routes
})export default router
-
import Vue from 'vue': 导入 Vue 模块。 import VueRouter from 'vue-router': 导入 Vue Router 模块，用于处理路由。import EmpView from '@/views/tlias/EmpView.vue': 导入名为EmpView的视图组件，路径为@/views/tlias/EmpView.vue。import DeptView from '@/views/tlias/DeptView.vue': 导入名为DeptView的视图组件，路径为@/views/tlias/DeptView.vue。Vue.use(VueRouter): 告诉 Vue 使用 VueRouter 插件来管理路由。const routes = [...]: 定义了一个名为routes的数组，包含了路由对象的配置信息。- 每个路由对象有以下属性：
path: 路由路径，例如'/'表示根路径，'/emp'表示员工管理路径，'/dept'表示部门管理路径。name: 路由名称，用于标识路由。component: 路由对应的视图组件。component: EmpView: 根路径'/'和'/emp'使用同一个视图组件EmpView。component: () => import('@/views/tlias/DeptView.vue'): 部门管理路径'/dept'使用延迟加载的方式导入DeptView组件。
onst router = new VueRouter({ routes }): 使用routes数组创建了一个 VueRouter 实例router。export default router: 导出router实例，以便在 Vue 应用中使用该路由配置。
{path: '/',redirect: '/dept'},-
path:
'/'- 这表示当访问根路径
'/'时，将会触发重定向操作。
- 这表示当访问根路径
-
redirect:
'/dept'- 这表示将根路径
'/'重定向到'/dept'路径。
- 这表示将根路径
-
重定向的目标路径必须在路由配置中存在。在你的路由配置中，确保有一个名为
'dept'的路径，并且该路径正确指向了部门管理页面的组件。 -
重定向可以提供更好的用户体验，例如可以将用户直接引导到应用的主要内容页面，而不需要他们手动输入路径或者点击导航链接。
App.vue中
<template><div><router-view></router-view></div>
</template> 
打包部署
打包
部署
介绍：Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。
官网：https://nginx.org/
部署：将打包好的 dist 目录下的文件，复制到nginx安装目录的html目录下。
启动：双击 nginx.exe 文件即可，Nginx服务器默认占用 80 端口号
注：Nginx默认占用80端口号，如果80端口号被占用，可以在nginx.conf中修改端口号。(netstat –ano | findStr 80)
直接访问：http://localhost:端口号即可。
总结
主要介绍了部门管理页面、路由、打包部署！！！
