这是一个 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);