perf: Pack on demand

This commit is contained in:
xiaoxian521 2021-04-21 23:20:14 +08:00
parent 62ad9e6f40
commit 679cfae7fb
18 changed files with 677 additions and 226 deletions

200
package-lock.json generated
View File

@ -762,6 +762,16 @@
"integrity": "sha1-RdXbmefuXmvE82LgCL+RerUEmIc=",
"dev": true
},
"camel-case": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz",
"integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==",
"dev": true,
"requires": {
"pascal-case": "^3.1.2",
"tslib": "^2.0.3"
}
},
"camelcase": {
"version": "6.2.0",
"resolved": "https://registry.npm.taobao.org/camelcase/download/camelcase-6.2.0.tgz",
@ -774,6 +784,17 @@
"integrity": "sha1-qZkBSjXOvU+YxAWTCgV6DXU1Lrk=",
"dev": true
},
"capital-case": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/capital-case/-/capital-case-1.0.4.tgz",
"integrity": "sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==",
"dev": true,
"requires": {
"no-case": "^3.0.4",
"tslib": "^2.0.3",
"upper-case-first": "^2.0.2"
}
},
"chalk": {
"version": "2.4.2",
"resolved": "https://registry.npm.taobao.org/chalk/download/chalk-2.4.2.tgz?cache=0&sync_timestamp=1604053731560&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fchalk%2Fdownload%2Fchalk-2.4.2.tgz",
@ -784,6 +805,26 @@
"supports-color": "^5.3.0"
}
},
"change-case": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/change-case/-/change-case-4.1.2.tgz",
"integrity": "sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==",
"dev": true,
"requires": {
"camel-case": "^4.1.2",
"capital-case": "^1.0.4",
"constant-case": "^3.0.4",
"dot-case": "^3.0.4",
"header-case": "^2.0.4",
"no-case": "^3.0.4",
"param-case": "^3.0.4",
"pascal-case": "^3.1.2",
"path-case": "^3.0.4",
"sentence-case": "^3.0.4",
"snake-case": "^3.0.4",
"tslib": "^2.0.3"
}
},
"chokidar": {
"version": "3.5.1",
"resolved": "https://registry.npm.taobao.org/chokidar/download/chokidar-3.5.1.tgz?cache=0&sync_timestamp=1610719380575&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fchokidar%2Fdownload%2Fchokidar-3.5.1.tgz",
@ -862,6 +903,17 @@
"bluebird": "^3.7.2"
}
},
"constant-case": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/constant-case/-/constant-case-3.0.4.tgz",
"integrity": "sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==",
"dev": true,
"requires": {
"no-case": "^3.0.4",
"tslib": "^2.0.3",
"upper-case": "^2.0.2"
}
},
"convert-source-map": {
"version": "1.7.0",
"resolved": "https://registry.npm.taobao.org/convert-source-map/download/convert-source-map-1.7.0.tgz",
@ -929,6 +981,16 @@
"integrity": "sha1-RNLqNnm49NT/ujPwPYZfwee/SVU=",
"dev": true
},
"dot-case": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
"integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
"dev": true,
"requires": {
"no-case": "^3.0.4",
"tslib": "^2.0.3"
}
},
"dotenv": {
"version": "8.2.0",
"resolved": "https://registry.npm.taobao.org/dotenv/download/dotenv-8.2.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdotenv%2Fdownload%2Fdotenv-8.2.0.tgz",
@ -996,6 +1058,12 @@
"integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=",
"dev": true
},
"es-module-lexer": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.4.1.tgz",
"integrity": "sha512-ooYciCUtfw6/d2w56UVeqHPcoCFAiJdz5XOkYpv/Txl1HMUozpXjz/2RIQgqwKdXNDPSF1W7mJCFse3G+HDyAA==",
"dev": true
},
"es5-ext": {
"version": "0.10.53",
"resolved": "https://registry.npm.taobao.org/es5-ext/download/es5-ext-0.10.53.tgz",
@ -1230,6 +1298,16 @@
"integrity": "sha1-gdAbtd6OpKIUrV1urRtSNGCwtFo=",
"dev": true
},
"header-case": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/header-case/-/header-case-2.0.4.tgz",
"integrity": "sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==",
"dev": true,
"requires": {
"capital-case": "^1.0.4",
"tslib": "^2.0.3"
}
},
"html-tags": {
"version": "3.1.0",
"resolved": "https://registry.npm.taobao.org/html-tags/download/html-tags-3.1.0.tgz",
@ -1374,6 +1452,15 @@
"integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=",
"dev": true
},
"lower-case": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
"integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
"dev": true,
"requires": {
"tslib": "^2.0.3"
}
},
"lru-cache": {
"version": "5.1.1",
"resolved": "https://registry.npm.taobao.org/lru-cache/download/lru-cache-5.1.1.tgz",
@ -1464,6 +1551,16 @@
"resolved": "https://registry.npm.taobao.org/next-tick/download/next-tick-1.0.0.tgz",
"integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw="
},
"no-case": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
"integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
"dev": true,
"requires": {
"lower-case": "^2.0.2",
"tslib": "^2.0.3"
}
},
"node-releases": {
"version": "1.1.71",
"resolved": "https://registry.npm.taobao.org/node-releases/download/node-releases-1.1.71.tgz?cache=0&sync_timestamp=1614110416015&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fnode-releases%2Fdownload%2Fnode-releases-1.1.71.tgz",
@ -1501,12 +1598,32 @@
"ee-first": "1.1.1"
}
},
"param-case": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
"integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==",
"dev": true,
"requires": {
"dot-case": "^3.0.4",
"tslib": "^2.0.3"
}
},
"parseurl": {
"version": "1.3.3",
"resolved": "https://registry.npm.taobao.org/parseurl/download/parseurl-1.3.3.tgz",
"integrity": "sha1-naGee+6NEt/wUT7Vt2lXeTvC6NQ=",
"dev": true
},
"pascal-case": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
"integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
"dev": true,
"requires": {
"no-case": "^3.0.4",
"tslib": "^2.0.3"
}
},
"path": {
"version": "0.12.7",
"resolved": "https://registry.npm.taobao.org/path/download/path-0.12.7.tgz",
@ -1516,6 +1633,16 @@
"util": "^0.10.3"
}
},
"path-case": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/path-case/-/path-case-3.0.4.tgz",
"integrity": "sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==",
"dev": true,
"requires": {
"dot-case": "^3.0.4",
"tslib": "^2.0.3"
}
},
"path-parse": {
"version": "1.0.6",
"resolved": "https://registry.npm.taobao.org/path-parse/download/path-parse-1.0.6.tgz",
@ -1739,6 +1866,27 @@
"integrity": "sha1-7gpkyK9ejO6mdoexM3YeG+y9HT0=",
"dev": true
},
"sentence-case": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/sentence-case/-/sentence-case-3.0.4.tgz",
"integrity": "sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==",
"dev": true,
"requires": {
"no-case": "^3.0.4",
"tslib": "^2.0.3",
"upper-case-first": "^2.0.2"
}
},
"snake-case": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz",
"integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==",
"dev": true,
"requires": {
"dot-case": "^3.0.4",
"tslib": "^2.0.3"
}
},
"sortablejs": {
"version": "1.10.2",
"resolved": "https://registry.npm.taobao.org/sortablejs/download/sortablejs-1.10.2.tgz",
@ -1839,6 +1987,24 @@
"integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=",
"dev": true
},
"upper-case": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/upper-case/-/upper-case-2.0.2.tgz",
"integrity": "sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==",
"dev": true,
"requires": {
"tslib": "^2.0.3"
}
},
"upper-case-first": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/upper-case-first/-/upper-case-first-2.0.2.tgz",
"integrity": "sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==",
"dev": true,
"requires": {
"tslib": "^2.0.3"
}
},
"util": {
"version": "0.10.4",
"resolved": "https://registry.npm.taobao.org/util/download/util-0.10.4.tgz",
@ -1960,6 +2126,40 @@
}
}
},
"vite-plugin-style-import": {
"version": "0.9.2",
"resolved": "https://registry.npmjs.org/vite-plugin-style-import/-/vite-plugin-style-import-0.9.2.tgz",
"integrity": "sha512-YjPtKzr5WSwAQW6UD7DBtCraxJ4X7pQXUdBOYriowz223n3W3T2RscUs7CxzAhGDEG/ttcc6vvA6A5/eVowRTw==",
"dev": true,
"requires": {
"@rollup/pluginutils": "^4.1.0",
"change-case": "^4.1.2",
"debug": "^4.3.2",
"es-module-lexer": "^0.4.1",
"magic-string": "^0.25.7"
},
"dependencies": {
"@rollup/pluginutils": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.1.0.tgz",
"integrity": "sha512-TrBhfJkFxA+ER+ew2U2/fHbebhLT/l/2pRk0hfj9KusXUuRXd2v0R58AfaZK9VXDQ4TogOSEmICVrQAA3zFnHQ==",
"dev": true,
"requires": {
"estree-walker": "^2.0.1",
"picomatch": "^2.2.2"
}
},
"debug": {
"version": "4.3.2",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
"integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
"dev": true,
"requires": {
"ms": "2.1.2"
}
}
}
},
"vue": {
"version": "3.0.11",
"resolved": "https://registry.npmjs.org/vue/-/vue-3.0.11.tgz",

View File

@ -54,6 +54,7 @@
"sass-loader": "^11.0.1",
"typescript": "^4.2.4",
"vite": "^2.2.1",
"vite-plugin-mock": "^2.5.0"
"vite-plugin-mock": "^2.5.0",
"vite-plugin-style-import": "^0.9.2"
}
}

View File

@ -5,11 +5,12 @@
<span
v-if="item.redirect === 'noRedirect' || index == levelList.length - 1"
class="no-redirect"
>{{ $t(item.meta.title) }}</span
>
<a v-else @click.prevent="handleLink(item)">{{
>{{ $t(item.meta.title) }}</span>
<a v-else @click.prevent="handleLink(item)">
{{
$t(item.meta.title)
}}</a>
}}
</a>
</el-breadcrumb-item>
</transition-group>
</el-breadcrumb>
@ -36,20 +37,18 @@ export default defineComponent({
};
const getBreadcrumb = (): void => {
let matched = route.matched.filter(
(item) => item.meta && item.meta.title
);
let matched = route.matched.filter(item => item.meta && item.meta.title);
const first = matched[0];
if (!isDashboard(first)) {
matched = [
({
path: "/welcome",
meta: { title: "home" },
} as unknown) as RouteLocationMatched,
meta: { title: "message.hshome" }
} as unknown) as RouteLocationMatched
].concat(matched);
}
levelList.value = matched.filter(
(item) => item.meta && item.meta.title && item.meta.breadcrumb !== false
item => item.meta && item.meta.title && item.meta.breadcrumb !== false
);
};
@ -61,9 +60,9 @@ export default defineComponent({
);
// const pathCompile = (path: string): string | Object => {
// const { params } = route;
// var toPath = pathToRegexp.compile(path);
// return toPath(params);
// const { params } = route;
// var toPath = pathToRegexp.compile(path);
// return toPath(params);
// };
const handleLink = (item: RouteLocationMatched): any => {
@ -76,7 +75,7 @@ export default defineComponent({
};
return { levelList, handleLink };
},
}
});
</script>

View File

@ -23,7 +23,10 @@
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item icon="el-icon-switch-button" @click="logout">{{ $t("LoginOut") }}</el-dropdown-item>
<el-dropdown-item
icon="el-icon-switch-button"
@click="logout"
>{{ $t("message.hsLoginOut") }}</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>

View File

@ -1,7 +1,7 @@
<template>
<div class="screen-full" @click="toggle">
<i
:title="isFullscreen ? $t('exitfullscreen') : $t('fullscreen')"
:title="isFullscreen ? $t('message.hsexitfullscreen') : $t('message.hsfullscreen')"
:class="
isFullscreen
? 'iconfont team-iconexit-fullscreen'

View File

@ -13,7 +13,11 @@
<!-- 右侧功能按钮 -->
<ul class="right-func">
<li>
<i :title="$t('refreshRoute')" class="el-icon-refresh-right rotate" @click="onFresh"></i>
<i
:title="$t('message.hsrefreshRoute')"
class="el-icon-refresh-right rotate"
@click="onFresh"
></i>
</li>
<li>
<el-dropdown trigger="click" placement="bottom-end">

View File

@ -14,7 +14,7 @@ let dynamic: InterDynamic = reactive({
{
path: "/welcome",
meta: {
title: "home",
title: "message.hshome",
icon: "el-icon-s-home",
showLink: true,
savedPosition: false,

View File

@ -7,7 +7,7 @@ interface RouteModel {
export const homeRoute: RouteModel = {
path: "/welcome",
meta: {
title: "home",
title: "message.hshome",
icon: "el-icon-s-home",
showLink: true,
savedPosition: false,

View File

@ -1,24 +0,0 @@
{
"home": "首页",
"LoginOut": "退出系统",
"fullscreen": "全屏",
"exitfullscreen": "退出全屏",
"usermanagement": "用户管理",
"baseinfo": "基础信息",
"editor": "编辑器",
"error": "错误页面",
"404": "404",
"401": "401",
"components": "组件",
"video": "视频组件",
"map": "地图组件",
"draggable": "拖拽组件",
"split-pane": "切割面板",
"button": "按钮组件",
"cropping": "图片裁剪",
"countTo": "数字动画",
"selector": "选择器组件",
"flowChart": "流程图",
"seamless": "无缝滚动",
"refreshRoute": "刷新路由"
}

View File

@ -1,24 +0,0 @@
{
"home": "Home",
"LoginOut": "Login Out",
"fullscreen": "Fullscreen",
"exitfullscreen": "Exit Fullscreen",
"usermanagement": "User Manage",
"baseinfo": "Base Info",
"editor": "Editor",
"error": "Error Page",
"404": "404",
"401": "401",
"components": "Components",
"video": "Video Components",
"map": "Map Components",
"draggable": "Draggable Components",
"split-pane": "Split Pane",
"button": "Button Components",
"cropping": "Picture Cropping",
"countTo": "Digital Animation",
"selector": "Selector Components",
"flowChart": "flow Chart",
"seamless": "Seamless Scroll",
"refreshRoute": "refreshRoute"
}

View File

@ -1,70 +1,58 @@
import { createApp } from "vue"
import App from "./App.vue"
import router from "./router"
import store from "./store"
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
// 内置ElementPlus
import ElementPlus from "element-plus"
import "element-plus/lib/theme-chalk/index.css"
// 内置vxe-table
import "font-awesome/css/font-awesome.css"
import VXETable from "vxe-table"
import "vxe-table/lib/style.css"
// 内置国际化语言包
import { createI18n } from "vue-i18n"
import ch from "./locales/ch.json"
import en from "./locales/en.json"
const i18n = createI18n({
locale: 'ch', //默认使用中文
messages: {
ch,
en
}
})
import { useElementPlus } from "../src/plugins/element-plus";
import { useTable } from "../src/plugins/vxe-table";
import { usI18n } from "../src/plugins/i18n";
// 导入公共样式
import "./style/index.scss"
import "./style/index.scss";
// 导入字体图标
import "./assets/iconfont/iconfont.js"
import "./assets/iconfont/iconfont.css"
import "./assets/iconfont/iconfont.js";
import "./assets/iconfont/iconfont.css";
import { setConfig, getConfig } from "./config"
import axios from "axios"
import { setConfig, getConfig } from "./config";
import axios from "axios";
const app = createApp(App)
app.config.globalProperties.$config = getConfig()
const app = createApp(App);
app.config.globalProperties.$config = getConfig();
// 获取项目动态全局配置
export const getServerConfig = async (): Promise<any> => {
return axios({
baseURL: "",
method: "get",
url: process.env.NODE_ENV === 'production' ? "/manages/serverConfig.json" : "/serverConfig.json"
}).then(({ data: config }) => {
let $config = app.config.globalProperties.$config
// 自动注入项目配置
if (app && $config && typeof config === "object") {
$config = Object.assign($config, config)
app.config.globalProperties.$config = $config
// 设置全局配置
setConfig($config)
}
// 设置全局baseURL
app.config.globalProperties.$baseUrl = $config.baseURL
return $config
}).catch(() => { throw "请在public文件夹下添加serverConfig.json配置文件" })
}
url:
process.env.NODE_ENV === "production"
? "/manages/serverConfig.json"
: "/serverConfig.json",
})
.then(({ data: config }) => {
let $config = app.config.globalProperties.$config;
// 自动注入项目配置
if (app && $config && typeof config === "object") {
$config = Object.assign($config, config);
app.config.globalProperties.$config = $config;
// 设置全局配置
setConfig($config);
}
// 设置全局baseURL
app.config.globalProperties.$baseUrl = $config.baseURL;
return $config;
})
.catch(() => {
throw "请在public文件夹下添加serverConfig.json配置文件";
});
};
getServerConfig().then(() => {
app
.use(store)
.use(router)
.use(i18n)
.use(ElementPlus)
.use(VXETable)
.mount('#app')
})
.use(store)
.use(useElementPlus)
.use(useTable)
.use(usI18n)
.mount("#app");
});

View File

@ -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);
});
}

View File

@ -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,
},
};

14
src/plugins/i18n/index.ts Normal file
View File

@ -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);
}

View File

@ -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);
}

View File

@ -1,9 +1,4 @@
import {
createRouter,
createWebHistory,
createWebHashHistory,
RouteRecordRaw,
} from "vue-router";
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
import Layout from "../layout/index.vue";
@ -22,7 +17,7 @@ const routes: Array<RouteRecordRaw> = [
component: () =>
import(/* webpackChunkName: "home" */ "../views/welcome.vue"),
meta: {
title: "home",
title: "message.hshome",
showLink: true,
savedPosition: false,
},
@ -47,7 +42,7 @@ const routes: Array<RouteRecordRaw> = [
/* webpackChunkName: "components" */ "../views/components/video/index.vue"
),
meta: {
title: "video",
title: "message.hsvideo",
showLink: false,
savedPosition: true,
},
@ -59,7 +54,7 @@ const routes: Array<RouteRecordRaw> = [
/* webpackChunkName: "components" */ "../views/components/map/index.vue"
),
meta: {
title: "map",
title: "message.hsmap",
showLink: false,
savedPosition: true,
},
@ -71,7 +66,7 @@ const routes: Array<RouteRecordRaw> = [
/* webpackChunkName: "components" */ "../views/components/draggable/index.vue"
),
meta: {
title: "draggable",
title: "message.hsdraggable",
showLink: false,
savedPosition: true,
},
@ -83,7 +78,7 @@ const routes: Array<RouteRecordRaw> = [
/* webpackChunkName: "components" */ "../views/components/split-pane/index.vue"
),
meta: {
title: "split-pane",
title: "message.hssplitPane",
showLink: false,
savedPosition: true,
},
@ -95,7 +90,7 @@ const routes: Array<RouteRecordRaw> = [
/* webpackChunkName: "components" */ "../views/components/button/index.vue"
),
meta: {
title: "button",
title: "message.hsbutton",
showLink: false,
savedPosition: true,
},
@ -107,7 +102,7 @@ const routes: Array<RouteRecordRaw> = [
/* webpackChunkName: "components" */ "../views/components/cropping/index.vue"
),
meta: {
title: "cropping",
title: "message.hscropping",
showLink: false,
savedPosition: true,
},
@ -119,7 +114,7 @@ const routes: Array<RouteRecordRaw> = [
/* webpackChunkName: "components" */ "../views/components/count-to/index.vue"
),
meta: {
title: "countTo",
title: "message.hscountTo",
showLink: false,
savedPosition: true,
},
@ -131,7 +126,7 @@ const routes: Array<RouteRecordRaw> = [
/* webpackChunkName: "components" */ "../views/components/selector/index.vue"
),
meta: {
title: "selector",
title: "message.hsselector",
showLink: false,
savedPosition: true,
},
@ -143,7 +138,7 @@ const routes: Array<RouteRecordRaw> = [
/* webpackChunkName: "components" */ "../views/components/seamless-scroll/index.vue"
),
meta: {
title: "seamless",
title: "message.hsseamless",
showLink: false,
savedPosition: true,
},
@ -152,7 +147,7 @@ const routes: Array<RouteRecordRaw> = [
// path: '/components/flowChart',
// component: () => import(/* webpackChunkName: "components" */ '../views/components/flow-chart/index.vue'),
// meta: {
// title: 'flowChart',
// title: 'message.hsflowChart',
// showLink: false,
// savedPosition: true
// }
@ -160,7 +155,7 @@ const routes: Array<RouteRecordRaw> = [
],
meta: {
icon: "el-icon-menu",
title: "components",
title: "message.hscomponents",
showLink: true,
savedPosition: true,
},
@ -178,7 +173,7 @@ const routes: Array<RouteRecordRaw> = [
/* webpackChunkName: "user" */ "../views/flow-chart/index.vue"
),
meta: {
title: "flowChart",
title: "message.hsflowChart",
showLink: false,
savedPosition: true,
},
@ -186,7 +181,7 @@ const routes: Array<RouteRecordRaw> = [
],
meta: {
icon: "el-icon-set-up",
title: "flowChart",
title: "message.hsflowChart",
showLink: true,
savedPosition: true,
},
@ -203,7 +198,7 @@ const routes: Array<RouteRecordRaw> = [
import(/* webpackChunkName: "user" */ "../views/editor/index.vue"),
meta: {
// icon: 'el-icon-edit-outline',
title: "editor",
title: "message.hseditor",
showLink: false,
savedPosition: true,
},
@ -211,7 +206,7 @@ const routes: Array<RouteRecordRaw> = [
],
meta: {
icon: "el-icon-edit-outline",
title: "editor",
title: "message.hseditor",
showLink: true,
savedPosition: true,
},
@ -228,7 +223,7 @@ const routes: Array<RouteRecordRaw> = [
import(/* webpackChunkName: "user" */ "../views/user.vue"),
meta: {
// icon: 'el-icon-user',
title: "baseinfo",
title: "message.hsBaseinfo",
showLink: false,
savedPosition: true,
},
@ -236,7 +231,7 @@ const routes: Array<RouteRecordRaw> = [
],
meta: {
icon: "el-icon-user",
title: "usermanagement",
title: "message.hsuserManagement",
showLink: true,
savedPosition: true,
},
@ -252,7 +247,7 @@ const routes: Array<RouteRecordRaw> = [
component: () =>
import(/* webpackChunkName: "error" */ "../views/error/401.vue"),
meta: {
title: "401",
title: "message.hsfourZeroOne",
showLink: false,
savedPosition: true,
},
@ -262,7 +257,7 @@ const routes: Array<RouteRecordRaw> = [
component: () =>
import(/* webpackChunkName: "error" */ "../views/error/404.vue"),
meta: {
title: "404",
title: "message.hsfourZeroFour",
showLink: false,
savedPosition: true,
},
@ -270,7 +265,7 @@ const routes: Array<RouteRecordRaw> = [
],
meta: {
icon: "el-icon-position",
title: "error",
title: "message.hserror",
showLink: true,
savedPosition: true,
},
@ -281,7 +276,7 @@ const routes: Array<RouteRecordRaw> = [
component: () =>
import(/* webpackChunkName: "login" */ "../views/login.vue"),
meta: {
title: "登陆",
title: "message.hslogin",
showLink: false,
},
},
@ -291,7 +286,7 @@ const routes: Array<RouteRecordRaw> = [
component: () =>
import(/* webpackChunkName: "register" */ "../views/register.vue"),
meta: {
title: "注册",
title: "message.hsregister",
showLink: false,
},
},
@ -302,7 +297,7 @@ const routes: Array<RouteRecordRaw> = [
redirect: "/error/404",
meta: {
icon: "el-icon-s-home",
title: "首页",
title: "message.hshome",
showLink: false,
savedPosition: false,
},
@ -344,7 +339,7 @@ const whiteList = ["/login", "/register"];
router.beforeEach((to, _from, next) => {
NProgress.start();
// @ts-ignore
document.title = to.meta.title; // 动态title
// document.title = $t(to.meta.title); // 动态title
whiteList.indexOf(to.path) !== -1 || storageSession.getItem("info")
? next()
: next("/login"); // 全部重定向到登录页

View File

@ -18,65 +18,65 @@ export default {
exportConfig: {},
pagerConfig: {
perfect: true,
pageSize: 15,
pageSize: 15
},
editConfig: {
trigger: "click",
mode: "row",
showStatus: true,
showStatus: true
},
toolbarConfig: {
buttons: [
{
code: "insert_actived",
name: "新增",
name: "message.hsadd",
status: "perfect",
icon: "fa fa-plus",
icon: "fa fa-plus"
},
{
code: "mark_cancel",
name: "标记/取消",
name: "message.hsmark",
status: "perfect",
icon: "fa fa-trash-o",
icon: "fa fa-trash-o"
},
{
code: "save",
name: "保存",
name: "message.hssave",
status: "perfect",
icon: "fa fa-save",
},
icon: "fa fa-save"
}
],
perfect: true,
refresh: {
icon: "fa fa-refresh",
iconLoading: "fa fa-spinner fa-spin",
iconLoading: "fa fa-spinner fa-spin"
},
import: {
icon: "fa fa-upload",
icon: "fa fa-upload"
},
export: {
icon: "fa fa-download",
icon: "fa fa-download"
},
print: {
icon: "fa fa-print",
icon: "fa fa-print"
},
zoom: {
iconIn: "fa fa-arrows-alt",
iconOut: "fa fa-expand"
},
// zoom: {
// iconIn: "fa fa-arrows-alt",
// iconOut: "fa fa-expand",
// },
custom: {
icon: "fa fa-cog",
},
icon: "fa fa-cog"
}
},
proxyConfig: {
props: {
result: "result",
total: "page.total",
total: "page.total"
},
ajax: {
// Promise
query: ({ page }) => {
return new Promise((resolve) => {
return new Promise(resolve => {
setTimeout(() => {
const list = [
{
@ -86,7 +86,7 @@ export default {
role: "Develop",
sex: "Man",
age: 28,
address: "Shenzhen",
address: "Shenzhen"
},
{
id: 10002,
@ -95,7 +95,7 @@ export default {
role: "Test",
sex: "Women",
age: 22,
address: "Guangzhou",
address: "Guangzhou"
},
{
id: 10003,
@ -104,7 +104,7 @@ export default {
role: "PM",
sex: "Man",
age: 32,
address: "Shanghai",
address: "Shanghai"
},
{
id: 10004,
@ -113,7 +113,7 @@ export default {
role: "Designer",
sex: "Women ",
age: 23,
address: "Shenzhen",
address: "Shenzhen"
},
{
id: 10005,
@ -122,7 +122,7 @@ export default {
role: "Develop",
sex: "Women ",
age: 30,
address: "Shanghai",
address: "Shanghai"
},
{
id: 10006,
@ -131,7 +131,7 @@ export default {
role: "Designer",
sex: "Women ",
age: 21,
address: "Shenzhen",
address: "Shenzhen"
},
{
id: 10007,
@ -140,7 +140,7 @@ export default {
role: "Test",
sex: "Man ",
age: 29,
address: "vxe-table 从入门到放弃",
address: "vxe-table 从入门到放弃"
},
{
id: 10008,
@ -149,7 +149,7 @@ export default {
role: "Develop",
sex: "Man ",
age: 35,
address: "Shenzhen",
address: "Shenzhen"
},
{
id: 10009,
@ -158,7 +158,7 @@ export default {
role: "Develop",
sex: "Man ",
age: 35,
address: "Shenzhen",
address: "Shenzhen"
},
{
id: 100010,
@ -167,7 +167,7 @@ export default {
role: "Develop",
sex: "Man ",
age: 35,
address: "Guangzhou",
address: "Guangzhou"
},
{
id: 100011,
@ -176,7 +176,7 @@ export default {
role: "Test",
sex: "Women ",
age: 26,
address: "vxe-table 从入门到放弃",
address: "vxe-table 从入门到放弃"
},
{
id: 100012,
@ -185,7 +185,7 @@ export default {
role: "Develop",
sex: "Man ",
age: 34,
address: "Guangzhou",
address: "Guangzhou"
},
{
id: 100013,
@ -194,24 +194,24 @@ export default {
role: "Test",
sex: "Women ",
age: 22,
address: "Shenzhen",
},
address: "Shenzhen"
}
];
resolve({
page: {
total: list.length,
total: list.length
},
result: list.slice(
(page.currentPage - 1) * page.pageSize,
page.currentPage * page.pageSize
),
)
});
}, 100);
});
},
// body { removeRecords }
delete: () => {
return new Promise((resolve) => {
return new Promise(resolve => {
setTimeout(() => {
resolve({});
}, 100);
@ -219,13 +219,13 @@ export default {
},
// body { insertRecords, updateRecords, removeRecords, pendingRecords }
save: () => {
return new Promise((resolve) => {
return new Promise(resolve => {
setTimeout(() => {
resolve({});
}, 100);
});
},
},
}
}
},
columns: [
{ type: "checkbox", width: 50 },
@ -237,15 +237,15 @@ export default {
field: "address",
title: "Address",
showOverflow: true,
editRender: { name: "input" },
},
],
editRender: { name: "input" }
}
]
} as VxeGridProps);
return {
gridOptions,
gridOptions
};
},
}
};
</script>

View File

@ -1,36 +1,38 @@
import { resolve } from 'path'
import { UserConfigExport, ConfigEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import { loadEnv } from './build/utils'
import { createProxy } from './build/proxy'
import { viteMockServe } from 'vite-plugin-mock'
import { resolve } from "path";
import { UserConfigExport, ConfigEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
import { loadEnv } from "./build/utils";
import { createProxy } from "./build/proxy";
import { viteMockServe } from "vite-plugin-mock";
import styleImport from "vite-plugin-style-import";
const pathResolve = (dir: string): any => {
return resolve(__dirname, '.', dir)
}
return resolve(__dirname, ".", dir);
};
const { VITE_PORT, VITE_PUBLIC_PATH, VITE_PROXY, VITE_OPEN } = loadEnv()
const { VITE_PORT, VITE_PUBLIC_PATH, VITE_PROXY, VITE_OPEN } = loadEnv();
const alias: Record<string, string> = {
'/@': pathResolve('src'),
'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js' //解决警告You are running the esm-bundler build of vue-i18n. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle.
}
"/@": pathResolve("src"),
"vue-i18n": "vue-i18n/dist/vue-i18n.cjs.js", //解决警告You are running the esm-bundler build of vue-i18n. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle.
};
const root: string = process.cwd()
const root: string = process.cwd();
export default ({ command }: ConfigEnv): UserConfigExport => {
let prodMock = true
let prodMock = true;
return {
/**
*
* /manages/ /manages/
* @default '/'
*/
base: process.env.NODE_ENV === "production" ? "/manages/" : VITE_PUBLIC_PATH,
base:
process.env.NODE_ENV === "production" ? "/manages/" : VITE_PUBLIC_PATH,
root,
resolve: {
alias
alias,
},
// 服务端渲染
server: {
@ -42,15 +44,38 @@ export default ({ command }: ConfigEnv): UserConfigExport => {
*/
port: VITE_PORT,
// 本地跨域代理
proxy: createProxy(VITE_PROXY)
proxy: createProxy(VITE_PROXY),
},
plugins: [
vue(),
vueJsx(),
styleImport({
libs: [
// 按需加载element-plus
{
libraryName: "element-plus",
esModule: true,
ensureStyleFile: true,
resolveStyle: (name) => {
return `element-plus/lib/theme-chalk/${name}.css`;
},
resolveComponent: (name) => {
return `element-plus/lib/${name}`;
},
},
// 按需加载vxe-table
{
libraryName: "vxe-table",
esModule: true,
resolveComponent: (name) => `vxe-table/es/${name}`,
resolveStyle: (name) => `vxe-table/es/${name}/style.css`,
},
],
}),
viteMockServe({
mockPath: 'mock',
localEnabled: command === 'serve',
prodEnabled: command !== 'serve' && prodMock,
mockPath: "mock",
localEnabled: command === "serve",
prodEnabled: command !== "serve" && prodMock,
injectCode: `
import { setupProdMockServer } from './mockProdServer';
setupProdMockServer();
@ -58,13 +83,19 @@ export default ({ command }: ConfigEnv): UserConfigExport => {
logger: true,
}),
],
optimizeDeps: {
include: [
"element-plus/lib/locale/lang/zh-cn",
"element-plus/lib/locale/lang/en",
],
},
build: {
brotliSize: false,
// 消除打包大小超过500kb警告
chunkSizeWarningLimit: 2000
chunkSizeWarningLimit: 2000,
},
define: {
__INTLIFY_PROD_DEVTOOLS__: false
}
}
}
__INTLIFY_PROD_DEVTOOLS__: false,
},
};
};