perf: Pack on demand

src/plugins/element-plus/index.ts

@@ -0,0 +1,62 @@
+import { App } from "vue";
+import {
+  ElAffix,
+  ElSkeleton,
+  ElBreadcrumb,
+  ElBreadcrumbItem,
+  ElScrollbar,
+  ElSubmenu,
+  ElButton,
+  ElCol,
+  ElRow,
+  ElSpace,
+  ElDivider,
+  ElCard,
+  ElDropdown,
+  ElDialog,
+  ElMenu,
+  ElMenuItem,
+  ElDropdownItem,
+  ElDropdownMenu,
+  ElIcon,
+  ElInput,
+  ElForm,
+  ElFormItem,
+  ElLoading,
+} from "element-plus";
+
+const components = [
+  ElAffix,
+  ElSkeleton,
+  ElBreadcrumb,
+  ElBreadcrumbItem,
+  ElScrollbar,
+  ElSubmenu,
+  ElButton,
+  ElCol,
+  ElRow,
+  ElSpace,
+  ElDivider,
+  ElCard,
+  ElDropdown,
+  ElDialog,
+  ElMenu,
+  ElMenuItem,
+  ElDropdownItem,
+  ElDropdownMenu,
+  ElIcon,
+  ElInput,
+  ElForm,
+  ElFormItem,
+];
+
+const plugins = [ElLoading];
+
+export function useElementPlus(app: App) {
+  components.forEach((component) => {
+    app.component(component.name, component);
+  });
+  plugins.forEach((plugin) => {
+    app.use(plugin);
+  });
+}

src/plugins/i18n/config.ts

@@ -0,0 +1,94 @@
+// 菜单国际化配置
+// vxe-table组件国际化
+import zhVxeTable from "vxe-table/lib/locale/lang/zh-CN";
+import enVxeTable from "vxe-table/lib/locale/lang/en-US";
+
+export const menusConfig = {
+  zh: {
+    message: {
+      hshome: "首页",
+      hsuserManagement: "用户管理",
+      hsBaseinfo: "基础信息",
+      hseditor: "编辑器",
+      hserror: "错误页面",
+      hsfourZeroFour: "404",
+      hsfourZeroOne: "401",
+      hscomponents: "组件",
+      hsvideo: "视频组件",
+      hsmap: "地图组件",
+      hsdraggable: "拖拽组件",
+      hssplitPane: "切割面板",
+      hsbutton: "按钮组件",
+      hscropping: "图片裁剪",
+      hscountTo: "数字动画",
+      hsselector: "选择器组件",
+      hsflowChart: "流程图",
+      hsseamless: "无缝滚动",
+    },
+  },
+  en: {
+    message: {
+      hshome: "Home",
+      hsuserManagement: "User Manage",
+      hsBaseinfo: "Base Info",
+      hseditor: "Editor",
+      hserror: "Error Page",
+      hsfourZeroFour: "404",
+      hsfourZeroOne: "401",
+      hscomponents: "Components",
+      hsvideo: "Video Components",
+      hsmap: "Map Components",
+      hsdraggable: "Draggable Components",
+      hssplitPane: "Split Pane",
+      hsbutton: "Button Components",
+      hscropping: "Picture Cropping",
+      hscountTo: "Digital Animation",
+      hsselector: "Selector Components",
+      hsflowChart: "Flow Chart",
+      hsseamless: "Seamless Scroll",
+    },
+  },
+};
+
+// 按钮配置
+export const buttonConfig = {
+  zh: {
+    message: {
+      hsLoginOut: "退出系统",
+      hsfullscreen: "全屏",
+      hsexitfullscreen: "退出全屏",
+      hsrefreshRoute: "刷新路由",
+      hslogin: "登陆",
+      hsregister: "注册",
+      hsadd: "新增",
+      hsmark: "标记/取消",
+      hssave: "保存",
+    },
+  },
+  en: {
+    message: {
+      hsLoginOut: "loginOut",
+      hsfullscreen: "fullScreen",
+      hsexitfullscreen: "exitFullscreen",
+      hsrefreshRoute: "refreshRoute",
+      hslogin: "login",
+      hsregister: "register",
+      hsadd: "Add",
+      hsmark: "Mark/Cancel",
+      hssave: "Save",
+    },
+  },
+};
+
+const localesList = [menusConfig, buttonConfig];
+
+export const localesConfigs = {
+  zh: {
+    message: Object.assign({}, ...localesList.map((v) => v.zh.message)),
+    ...zhVxeTable,
+  },
+  en: {
+    message: Object.assign({}, ...localesList.map((v) => v.en.message)),
+    ...enVxeTable,
+  },
+};

src/plugins/i18n/index.ts

@@ -0,0 +1,14 @@
+// 多组件库的国际化和本地项目国际化兼容
+import { App } from "vue";
+import { createI18n } from "vue-i18n";
+import { localesConfigs } from "./config";
+
+export const i18n = createI18n({
+  locale: "zh", // set locale
+  fallbackLocale: "zh", // set fallback locale
+  messages: localesConfigs,
+});
+
+export function usI18n(app: App) {
+  app.use(i18n);
+}

src/plugins/vxe-table/index.ts

@@ -0,0 +1,108 @@
+import { App } from "vue";
+import { i18n } from "../i18n/index";
+import "font-awesome/css/font-awesome.css";
+import "xe-utils";
+import {
+  // 核心
+  VXETable,
+
+  // 表格功能
+  Header,
+  Footer,
+  Icon,
+  Filter,
+  Edit,
+  Menu,
+  Export,
+  Keyboard,
+  Validator,
+
+  // 可选组件
+  Column,
+  Colgroup,
+  Grid,
+  Tooltip,
+  Toolbar,
+  Pager,
+  Form,
+  FormItem,
+  FormGather,
+  Checkbox,
+  CheckboxGroup,
+  Radio,
+  RadioGroup,
+  RadioButton,
+  Switch,
+  Input,
+  Select,
+  Optgroup,
+  Option,
+  Textarea,
+  Button,
+  Modal,
+  List,
+  Pulldown,
+
+  // 表格
+  Table,
+} from "vxe-table";
+
+// 全局默认参数
+VXETable.setup({
+  version: 0,
+  zIndex: 100,
+  table: {
+    autoResize: true,
+  },
+  // 对组件内置的提示语进行国际化翻译
+  i18n: (key, args) => i18n.global.t(key, args),
+  // 可选，对参数中的列头、校验提示..等进行自动翻译（只对支持国际化的有效）
+  translate(key, args) {
+    // 例如，只翻译 "app." 开头的键值
+    if (key && key.indexOf("message.") > -1) {
+      return i18n.global.t(key, args);
+    }
+    return key;
+  },
+});
+
+export function useTable(app: App) {
+  app
+    .use(Header)
+    .use(Footer)
+    .use(Icon)
+    .use(Filter)
+    .use(Edit)
+    .use(Menu)
+    .use(Export)
+    .use(Keyboard)
+    .use(Validator)
+
+    // 可选组件
+    .use(Column)
+    .use(Colgroup)
+    .use(Grid)
+    .use(Tooltip)
+    .use(Toolbar)
+    .use(Pager)
+    .use(Form)
+    .use(FormItem)
+    .use(FormGather)
+    .use(Checkbox)
+    .use(CheckboxGroup)
+    .use(Radio)
+    .use(RadioGroup)
+    .use(RadioButton)
+    .use(Switch)
+    .use(Input)
+    .use(Select)
+    .use(Optgroup)
+    .use(Option)
+    .use(Textarea)
+    .use(Button)
+    .use(Modal)
+    .use(List)
+    .use(Pulldown)
+    // 安装表格
+    .use(Table);
+}