其他功能
7.1.页面缓存KeepAlive
把 src/config/setting.js 中的 TAB_KEEP_ALIVE 值改为 true 即可开启 KeepAlive，需要注意 vue 中还要写 name 才可生效：
<!-- vue 3.3+ 可以直接使用 defineOptions 无需两个 script -->
<!-- vue 3.3之前版本还要写一个没有 setup 的 script 设置 name
<script>
export default {
name: 'SystemUser'
};
</script>
-->
如果 KeepAlive 仍没有生效，请检查这几个配置：
- src/config/setting.js 中的 TAB_KEEP_ALIVE 值是否为 true ;
- 是否开启了多页签，src/store/modules/theme.js 中的 tabs 值是否为 true ;
- 页面的 vue 中是否写了 name ;
- 页面的路由 meta 中的 keepAlive 值是否不为 false ;
如果需要关闭多页签时仍 KeepAlive 可通过样式隐藏页签栏而不是设置 tabs 为 false ，在 src/styles/index.scss 中加入：
.ele-admin-header > .ele-admin-tabs > ,
.ele-admin-header > .ele-admin-menus + .ele-admin-tabs {
display: none;
}
/ 还需要开启页签栏显示在顶栏, 将 src/layout/index.vue 中 /
/ 的 :tab-bar="tabBar ? (tabInHeader ? 'header' : true) : false" 改为 tab-bar="header" 即可 /
/ 通过将页签显示在顶栏再隐藏样式不会有影响, 因为默认的顶栏和页签栏之间有分割线而不是阴影 */
在 src/router/routes.js 中的 getMenuRoutes 方法里面使用菜单注册路由时会把菜单铺平， 因为多级嵌套路由使用 KeepAlive 和 Transition 组件会有很多奇怪的问题，一般都是采用铺平路由解决，做后台管理也基本用不上多级嵌套路由， 如果需要实现多级嵌套路由的效果，可以使用页面拆分组件加路由参数控制的形式实现，参考演示页面 个人中心/我的资料 ， “基本信息”和“账号绑定”是拆分为两个组件，根据路由参数显示不同的组件。
7.2.路由参数改变后更新页面缓存
KeepAlive 是根据组件名称缓存的，同一个路由参数不同但组件是同一个因此只会缓存一份，可以 watch 路由变化来根据不同参数更新数据：
除了 watch 路由变化外还可使用 onActivated 生命周期刷新数据，如表格页面想在页面切换回来时刷新表格数据：
7.3.路由不同参数分开缓存页面
在 src/components/RouterLayout/index.vue 中为 component 增加 :key="route.path" 就可以分开缓存(v1.1.8新增)：
7.4.按需引入说明
如果没有在 main.js 中全局安装 Element 或 EleAdminPlus，使用每个组件都需要手动引入比较麻烦，可在 vite.config.js 中配置按需引入插件：
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
import { EleAdminResolver } from 'ele-admin-plus/lib/utils/resolvers';
export default defineConfig(({ command }) => {
return {
plugins: [
vue(),
// 组件按需引入
Components({
dts: false,
resolvers: [
ElementPlusResolver({
importStyle: 'sass'
}),
EleAdminResolver({
importStyle: 'sass'
})
]
})
]
};
});
ElementPlusResolver 会自动识别所有 el 开头的组件自动加入引入的代码及样式，EleAdminResolver 会识别所有 ele 开头的组件。
EleAdminResolver 支持的全部参数如下：
import Components from 'unplugin-vue-components/vite';
import { EleAdminResolver } from 'ele-admin-plus/lib/utils/resolvers';
export default defineConfig(() => {
return {
plugins: [
Components({
dts: false,
resolvers: [
EleAdminResolver({
importStyle: 'sass', // false 不引入样式
path: '' // 默认是 '/es', 还可为 '/lib'
// 默认是 import { EleProTable } from 'ele-admin-plus/es'
// 为空是 import { EleProTable } from 'ele-admin-plus'
})
]
})
]
};
});
7.5.国际化多语言
在 src/i18n/use-locale.js 中对 Element、 EleAdminPlus、 Dayjs 的国际化配置进行了封装，在 App.vue 中使用：
7.6.表格列支持国际化
在其他页面使用国际化需要先在 src/i18n/lang/ 下的 js 里面添加不同的语言文案：
// zh_CN.js 里面添加中文语言
export const zh_CN = {
// ......省略其它
system: {
user: {
button: {
add: '新建',
edit: '编辑',
del: '删除'
},
table: {
username: '用户账号',
nickname: '用户名',
phone: '手机号',
action: '操作'
}
}
}
};
// en.js 里面添加英文语言
export const en = {
// ......省略其它
system: {
user: {
button: {
add: 'Add',
edit: 'Edit',
del: 'Delete'
},
table: {
username: 'Username',
nickname: 'Nickname',
phone: 'Phone',
action: 'Action'
}
}
}
};
// zh_TW.ts 里面也按照上面格式添加繁体中文语言, 这里省略
在页面中使用 t 方法获取文案，表格的列可以使用 computed 而不再是 ref ：
// 表格列配置
const columns = computed(() => {
return [
{ prop: 'username', label: t('system.user.table.username') },
{ prop: 'nickname', label: t('system.user.table.nickname') },
{ prop: 'phone', label: t('system.user.table.phone') },
{ columnKey: 'action', label: t('system.user.table.action'), slot: 'action' }
];
});
// 表格数据源
const datasource: DatasourceFunction = ({ pages }) => {
return pageUsers({ ...pages });
};
7.7.表单验证支持国际化
表单元素也是一样的操作，表单验证规则 rules 使用计算属性：
同样也是需要先在 src/i18n/lang/ 下的 js 里面添加不同的语言文案：
// zh_CN.js 里面添加中文语言
export const zh_CN = {
// ......省略其它
login: {
username: '登录账号',
password: '登录密码',
remember: '记住密码',
login: '登录',
usernameTip: '请输入登录账号',
passwordTip: '请输入登录密码'
}
};
// en.js 里面添加英文语言
export const zh_CN = {
// ......省略其它
login: {
username: 'Username',
password: 'Password',
remember: 'Remember',
login: 'Login',
usernameTip: 'please input username',
passwordTip: 'please input password'
}
};
// zh_TW.ts 里面也按照上面格式添加繁体中文语言, 这里省略
7.8.移动端响应式
如果想要关闭移动端的响应式，在移动端呈现和 PC 一样的布局然后整体缩放的效果，可以这样设置：
/* 先在 src/styles/index.scs 中给 body 设置最小宽度 */
body {
height: 100vh;
min-width: 1200px;
overflow-x: hidden;
overflow-y: auto;
}
然后修改 index.html 中的 viewport meta 将 width 设置和 body 的最小宽度一致：
export default defineConfig(({ command }) => {
// ......省略其它代码
// 在 plugins 这里添加 JSX 的 Vite 插件
const plugins = [vue(), vueJsx()];
// ......省略其它代码
});
然后就可以创建后缀为 .jsx 或 .tsx 的文件并使用了，示例：
// 例如新建 my-test.jsx 写法如下
import { defineComponent, ref } from 'vue';
export default defineComponent({
props: {
text: String
},
setup(props) {
const name = ref('AAA');
return () => (
export default defineComponent({
props: {
text: String as PropType<'bbb' | 'ccc' | 'ddd'>
},
setup(props) {
const name = ref('AAA');
return () => (
export default defineConfig({
presets: [presetUno(), presetAttributify()]
});
然后在根目录的 vite.config.js 中添加 UnoCSS 的 Vite 插件：
// ......省略其它代码
// 引入 UnoCSS 的 Vite 插件
import UnoCSS from 'unocss/vite';
export default defineConfig(({ command }) => {
// ......省略其它代码
// 在 plugins 这里添加 UnoCSS 的 Vite 插件
const plugins = [vue(), UnoCSS()];
// ......省略其它代码
});
然后在 src/main.js 中引入 virtual:uno.css 文件，建议写在第一行：
// 引入 virtual:uno.css 一定要写在所有其它样式之前
import 'virtual:uno.css';
// ......省略其它内容
// 至少要在这些引入之前引入, 因为这些里面都含有样式
import App from './App.vue';
import router from './router';
import DictData from '@/components/DictData/index.vue';
import installer from './as-needed';
import 'element-plus/theme-chalk/display.css';
import 'ele-admin-plus/es/style/nprogress.scss';
import './styles/themes/rounded.scss';
import './styles/themes/dark.scss';
import './styles/index.scss';
// ......省略其它内容
然后就可以在页面中使用 UnoCSS 了，示例：