项目参考//大裤衩 高配参考 vben-admin 低配参考 高配参考低配参考这边运行不成功根据提示安装需要安装的 然后就成功了请前往本人亲自验证若依后台这个是使用mock数据的后台的码云地址这个是mock+后台的参考https://gitee.com/full-stack-5755/vue-admin-block?_from=gitee_search //vue3的项目 账号密码 账户密码 coderwhy 123456 https://gitee.com/wang_jianhua_1230/vite2-vue3-ts-element-plus.git 花裤衩的框架梯子 https://gitee.com/panjiachen/vue-admin-template?_from=gitee_search 1环境的配置区分开发、测试、生产环境package.json中添加一个test打包命令 "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "test": "vue-cli-service build --mode test" }, 1 在根目录下创建一个.env.development 是开发环境VUE_APP_URL = 'https://www.easy-mock.com/mock/5d6cbe39fb84500aa8f810fe/vuetest' VUE_APP_xxx = '可以自己定义你需要的变量，但是要以VUE_APP_开头' 2 创建.env.test 为测试环境 同上3 创建.env.production 为生产环境 同上开发：npm run serve 测试：npm run test 生产：npm run build 2封装使用axioshttps://blog.csdn.net/m0_53912016/article/details/116524039在main.js全局引入import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); 动态实现侧边栏面包屑(常规)router -index.jsimport Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' Vue.use(VueRouter) const routes = [ { path: '/', name: 'Home', component: Home, //这个是router children:[ { path: '/index', name: 'index', meta: { title: '首页' }, component: () => import('../components/home/index.vue') }, // 权限配置 { path: '/jurisdiction', name: 'jurisdiction', redirect: '/page', meta: { title: '权限配置' }, component: () => import('@/components/home/leftSide/jurisdiction/index.vue'), children:[ { path: '/page', name: 'page', meta: { title: '页面' },//这个是展示面包屑的 component: () => import('../components/home/leftSide/jurisdiction/page.vue') }, { path: '/instruct', name: 'instruct', meta: { title: '指令' }, component: () => import('../components/home/leftSide/jurisdiction/instruct.vue') }, { path: '/role', name: 'role', meta: { title: '角色' }, component: () => import('../components/home/leftSide/jurisdiction/role.vue') }, ] }, ] }, { path: '/login', name: 'login', component: () => import('@/views/login.vue') }, { path: '/notFind', name: 'notFind', component: () => import('../views/err/notFide.vue') }, ] const router = new VueRouter({ routes }) export default router header.vue! 参考动态实现面包屑(可删/背景)//使用饿了的tag标签 根据选项添加 //如上所示 把上方的标签变成你需要的标签 然后渲染 其次 如果使用tag来定义 需要你在侧边栏2级去掉对应的meta 只保留子的部分 要不然点击一个 父的部分与子的部分都出现 侧边栏生成强制刷新input的数值 this.$forceUpdate() 多级导航菜单递归动态加载这个是我自己写的可以直通这个// json数据参考 menuData: [ { id: 1, path: "/a", name: "AdminIndex", nameZh: "首页", iconCls: "el-icon-s-home", component: "AdminIndex", parentId: 0, children: null }, { id: 2, path: "/admin", name: "User", nameZh: "用户管理", iconCls: "el-icon-user", component: "AdminIndex", parentId: 0, children: [ { id: 6, path: "/admin/user/profile", name: "Profile", nameZh: "用户信息", iconCls: null, component: "user/UserProfile", parentId: 2, children: null }, { id: 7, path: "/admin/user/role", name: "Role", nameZh: "角色配置", iconCls: null, component: "user/Role", parentId: 2, children: null } ] }, { id: 3, path: "/d", name: "Content", nameZh: "内容管理", iconCls: "el-icon-tickets", component: "AdminIndex", parentId: 0, children: [ { id: 9, path: "/d/content/department", name: "Department", nameZh: "就业部类", iconCls: null, component: "content/department", parentId: 3, children: null }, { id: 10, path: "/d/content/student", name: "Student", nameZh: "学生类", iconCls: null, component: "content/student", parentId: 3, children: [ { id: 20, path: "/d/content/student/graduateInfo", name: "graduateInfo", nameZh: "毕业生信息", iconCls: null, component: "content/student/graduateInfo", parentId: 10, children: null } ] }, { id: 11, path: "/d/content/enterprise", name: "Enterprise", nameZh: "企业类", iconCls: null, component: "content/enterprise", parentId: 3, children: null } ] }, { id: 4, path: "/n", name: "System", nameZh: "系统管理", iconCls: "el-icon-s-tools", component: "AdminIndex", parentId: 0, children: [ { id: 12, path: "/n/system/run", name: "Run", nameZh: "运行情况", iconCls: null, component: "system/run", parentId: 4, children: null }, { id: 13, path: "/n/system/data", name: "Data", nameZh: "备份恢复数据库", iconCls: null, component: "system/data", parentId: 4, children: null }, { id: 14, path: "/n/system/log", name: "Log", nameZh: "操作日志", iconCls: null, component: "system/log", parentId: 4, children: null } ] }, { id: 5, path: "/admin1", name: "Link", nameZh: "链接", iconCls: null, component: "AdminIndex", parentId: 0, children: null } ] 参考1参考2刷新页面保持菜单栏选中状态https://blog.csdn.net/weixin_44803311/article/details/119460184页面进来选中第一个展示//直接在router里面重定向哦 redirect: '/a' 左侧导航栏选中子级，父级高亮问题了https://blog.csdn.net/shumabaobei1214/article/details/120156470侧边栏的折叠展开如果直接在同页面https://blog.csdn.net/weixin_45811256/article/details/113620525否则不在同一页面,如下所示脱离这个的话要用兄弟组件传值或者放在vuex里面 主页面 a页面 b页面 然后在main.js里面引入这个const Bus = new Vue(); new Vue({ router, store, data: {Bus},//引入 render: h => h(App) }).$mount('#app') 点击二级菜单时一级图标保持高亮这里嵌入的是图片img哈 效果图参考链接这个是嵌套的icon哈 引入第3方的icon /deep/.el-submenu.is-active .el-submenu__title > .el-icon-eleme { color: white !important;//这个是父级的图标高亮 } /deep/.el-submenu.is-active > .el-submenu__title { color: white !important;//这个是父级的文字高亮 } 登录的详解登录页.vue一般写后台时要写登录依附element 以下是简单的案列 ! 登录记住账号密码功能参考我的码云 源代码记住账号密码登录密码的显示和隐藏显示隐藏登录密码的显示和隐藏表单的增删改查效果案例1 input禁止输入特殊字符如图所示://在mian.js中添加 便于全局使用 // 个是input禁止输入特殊字符 Vue.prototype.validForbid = function (value, number = 255) { value = value.replace(/[`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/g, '').replace(/\s/g, ""); if (value.length >= number) { this.$message({ type: "warning", message: `输入内容不能超过${number}个字符` }); } return value; } //然后在使用的时候这样 **@input="e => form.age = validForbid(e)"** 2 input 只允许输入汉字/数字onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')"//这个是汉字 //input使用正则限制 只允许输入汉字 onkeyup="value=value.replace(/[^\d]/g, '')" //这个是数字 效果与汉字的如图所示一样撒 如图所示: 增 增的效果是点击添加会弹出弹出框里面对应的input 根据input的绑定得到对应的值 根据正则判断对应条件 删改查权限的详解 (重要 yyds)低配的参考低配参考低配文档}

准备表头数据
这里采用在外部的文件当中定义表头数据,当需要使用的时候,引入就可以了
export function getBasicColumns2(): BasicColumn[] {
return [
{
title: 'sim卡号（iccid）',
dataIndex: 'iccid',
sorter: true,
width: 130,
align: 'center',
},
{
title: '设备编号',
dataIndex: 'deviceId',
sorter: true,
width: 130,
align: 'center',
},
{
title: '设备名称',
dataIndex: 'deviceName',
width: 150,
align: 'center',
},
{
title: 'sim状态',
dataIndex: ['state', 'text'],
sorter: true,
width: 130,
align: 'center',
},
{
title: '注册时间',
dataIndex: 'createTime',
sorter: true,
width: 150,
format: 'date|YYYY-MM-DD HH:mm:ss',
},
{
title: '激活时间',
dataIndex: 'activeDate',
sorter: true,
width: 150,
helpMessage: '激活后系统会有10-15分钟延迟，请耐心等待',
format: 'date|YYYY-MM-DD HH:mm:ss',
},
{
title: '开卡时间',
dataIndex: 'openDate',
sorter: true,
width: 150,
format: 'date|YYYY-MM-DD HH:mm:ss',
},
];
}
准备表格中的数据
可以通过请求来获取也可以在页面中定义也可以在外部定义,然后在页面中引入
这里通过 mock 来模拟了测试的数据list: [
{
id: '1555042387559780352',
deviceId: '2206101',
deviceName: '2222',
iccid: '89860483162090515058',
msisdn: '1440832155058',
imsi: '460080321505058',
state: { text: '停机', value: 'stop' },
fakeState: { text: '待激活', value: 'notActive' },
createTime: 1.659585971141e12,
activeDate: 1.6592832e12,
openDate: 1.6589376e12,
modifyTime: 1.659585971141e12,
},
{
id: '1562280375538700288',
deviceId: '2205909',
deviceName: '2205909',
iccid: '89860483162090515069',
msisdn: '1440832155069',
imsi: '460080321505069',
state: { text: '已激活', value: 'activated' },
fakeState: { text: '待激活', value: 'notActive' },
createTime: 1.661311641949e12,
activeDate: 1.6596288e12,
openDate: 1.6589376e12,
modifyTime: 1.661311641949e12,
},
{
id: '1565246034465939456',
deviceId: '2209002',
deviceName: '2209002',
iccid: '89860483162090515062',
msisdn: '1440832155062',
imsi: '460080321505062',
state: { text: '已激活', value: 'activated' },
fakeState: { text: '待激活', value: 'notActive' },
createTime: 1.662018710137e12,
activeDate: 1.6614432e12,
openDate: 1.6589376e12,
modifyTime: 1.662018710137e12,
},
{
id: '1582305527906983936',
deviceId: '2208101',
deviceName: '2208101',
iccid: 'RS232_NET',
imsi: 'RS232_NET',
state: { text: '待激活', value: 'notActive' },
fakeState: { text: '待激活', value: 'notActive' },
createTime: 1.666086010323e12,
modifyTime: 1.666086010323e12,
},
{
id: '1582546476625059840',
deviceId: '2208102',
deviceName: '皮带秤-网线',
iccid: 'RS232_NET',
imsi: 'RS232_NET',
state: { text: '待激活', value: 'notActive' },
fakeState: { text: '待激活', value: 'notActive' },
createTime: 1.666143456976e12,
modifyTime: 1.666143456976e12,
},
],
准备APImock 如何模拟数据在另一篇文章中有记录 vben admin 当中使用 mock 模拟数据以及对响应数据进行处理import { defHttp } from '/@/utils/http/axios';
import { BasicModel, Page } from '/@/api/model/baseModel';
enum Api {
SIM_DATA_LIST = '/v1/device/sim/_query',
}
export interface SimCard extends BasicModel<SimCard> {
configName?: string; // 名称
configKey?: string; // 参数键
configValue?: string; // 参数值
isSys?: string; // 系统内置（1是 0否）
}
//获取sim卡信息的接口
export const getSimDataList = (params?: SimCard
any) =>
defHttp.postJson<Page<SimCard>>({
url: Api.SIM_DATA_LIST,
params,
});
先定义 registerTable<template>
<BasicTable @register="registerTable" />
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { BasicTable, useTable } from '/@/components/Table'; // 引用组件
import { getBasicColumns2 } from './tableData'; // 引入表头数据
import { getSimDataList } from '/@/api/test/mock'; // 引入请求表格数据的接口
export default defineComponent({
name: 'ViewsTableTestBasicTableTest01',
components: { BasicTable },
});
</script>
<script lang="ts" setup>
const columns = getBasicColumns2(); // 表头数据,这里是将数据放到了一个单独的文件当中
const [registerTable] = useTable({
api: getSimDataList, // 请求数据的 api
columns: columns, // 表头数据
showTableSetting: true, // 是否显示表格设置
canResize: true, //是否开启自适应
});
</script>
以上是最基础的配置,更多的配置可以看看官网,这里只是问了让表格展示粗来~}