这是一个 Vue3.x 插件，集成的库如下：
- vue-i18n，国际化 I18n、多语言切换。
- vue-router，登录拦截(前置)、动态注册路由、路由缓存。
- axios，登录拦截(后置)、请求封装、过期刷新 token、字典合并请求。
- mitt、js-cookie，全局事件 eventBus、处理 cookie。
- 外部依赖库： vue、element-plus、js-utils-plus
npm install element-plus js-utils-plus admin-plugins-plus --save<template>
<el-config-provider :locale="locale">
<router-view v-slot="{ Component }">
<!-- 在 3.2.34 或以上的版本中，使用 <script setup> 的单文件组件会自动根据文件名生成对应的 name 选项，无需再手动声明。 -->
<keep-alive>
<component :is="Component" :key="$route.name" v-if="!$route.meta.noCache" />
</keep-alive>
<component :is="Component" :key="$route.name" v-if="$route.meta.noCache" />
</router-view>
</el-config-provider>
</template>
<script setup lang="ts">
import "element-plus/dist/index.css";
import { ref } from "vue";
// @ts-ignore
import { RouterView, useI18n, setLangCode, eventBus, getCurrentMessage, EventNames } from "admin-plugin-plus";
const i18n = useI18n();
const messages = getCurrentMessage();
const locale = ref(messages);
// 监听切换语言
eventBus.on(EventNames.I18N_CHANGE_LANG, (obj: any) => {
setLangCode(obj.lang);
i18n.locale.value = obj.lang;
locale.value = i18n.getLocaleMessage(obj.lang) as any;
});
</script>
<style scoped></style>import { createApp } from "vue";
import App from './App.vue'
import { pluginPlus } from "admin-plugin-plus";
import apis from "./utils/apis";
import routes from "./router";
import elementEnLocale from "element-plus/es/locale/lang/en"; // element-plus en
import elementZhLocale from "element-plus/es/locale/lang/zh-cn"; // element-plus zh-cn
import elementTwLocale from "element-plus/es/locale/lang/zh-tw"; // element-plus zh-tw
import "./assets/main.css";
const app = createApp(App);
app.use(pluginPlus, {
axios: {
baseURL: "/api", // [必填]基础URL
headers: { clientToken: "Basic YW5kcm9pZDphbmRyb2lk" }, // [可选]请求头追加参数
dictionaryRequest: async (codes) =>
await getJSON(apis.DictionaryCode, { groupCodes: codes }),
dictionaryHandler: (res) => res.data,
enableTokenRefresh: true,
tokenRefreshRequest: async () =>
await postJSON(apis.TokenRefresh, null, { headers: { tokenRefresh: true } }),
tokenRefreshHandler: (res) => [res.data.accessToken, res.data.expiresIn],
},
router: {
routes: constantRoutes, // [必填]静态路由列表
modules: import.meta.glob(`./views/**`), // [可选]引入所有页面文件
routesRequest: async () => await getJSON(apis.loginMenu),
routesHandler: (res) => res.data,
},
i18n: {
messages: {
CN: { ...elementZhLocale, test: "测试" },
TW: { ...elementTwLocale, test: "測試" },
EN: { ...elementEnLocale, test: "test" },
},
},
});
app.mount("#app");- router：Router 实例，
- getMenu：获取动态路由(菜单)，(appCode: string): any
- clearMenu：清除动态路由(菜单)，(): any
// 动态路由参数（Mete为静态和动态共有参数）
export declare interface Route {
parent?: string; // 挂载父级（父级name属性值，0或空为顶级路由）
path: string; // 路由地址
name: string; // 路由名称
component: string; // 页面组件（文件名）
appCode?: string; // Mete：应用编码
title?: string; // Mete：标题
icon?: string; // Mete：图标
noAuth?: boolean; // Mete：是否免登录
noCache?: boolean; // Mete：是否禁用缓存
noRedirect?: boolean; // Mete：是否禁用面包屑重定向
activeMenu?: string; // Mete：自定义激活路径菜单
isDynamic?: boolean; // Mete: 动态路由添加标识(自动)
}- i18n：I18n 实例，
- getCurrentMessage：获取当前 Message，():any
- setCurrentLocale：切换语言，(lang: string): void
- getToken：获取秘钥，(): string | undefined
- getAccessToken：获取秘钥，(): string | undefined
- getRefreshToken：获取秘钥，(): string | undefined
- setToken：设置秘钥，(token: string, expires: number, loginUser: object): string | undefined
- removeToken：删除秘钥，(): void
- getLoginUser：获取用户信息，(): any
- getLangCode：获取多语言 Code，(): string
- setLangCode：设置多语言 Code，(langCode: string): string | undefined
- removeLangCode：删除多语言 Code，(): void
- getUtcOffset：获取时区，(): string
- setUtcOffset：设置时区，(utcOffset: string): string | undefined
- removeUtcOffset：删除时区，(): void
- Storage: 浏览器存储，Storage.setItem、Storage.getItem、Storage.removeItem、Storage.clear
- getJSON: GET 请求，(url: string, data?: any, config?: AxiosRequestConfig) : Promise
- postJSON：POST 请求，(url: string, data?: any, config?: AxiosRequestConfig) : Promise
- putJSON：PUT 请求，(url: string, data?: any, config?: AxiosRequestConfig) : Promise
- deleteJSON：DELETE 请求，(url: string, data?: any, config?: AxiosRequestConfig) : Promise
- postFile：文件上传，(url: string, evt: any, params: object = {}, onProgress?: (e: any) => void): Promise
- exportFlie：文件下载，(url: string, data: object, method = "get"): Promise
- getDictionary： 获取字典列表，(codes: string, cb: Function): void
- getDictionaryCodeName： 获取字典{code:name}列表，(codes: string, cb: Function): void
- getDictionaryCodeValue： 获取字典{code:value}列表，(codes: string, cb: Function): void
- getDictionaryValueName： 获取字典{value:name}列表，(codes: string, cb: Function): void
- dicValueName：获取字典 name，(groupCode: string, value: string, ref: any): void
// 模板中使用 text
const text = ref("");
dicValueName("language_type", "CN", text);