From 9f17d588994ae55689ff002d35b367da73991885 Mon Sep 17 00:00:00 2001 From: hooray <304327508@qq.com> Date: Sun, 22 May 2022 04:30:57 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96element=20plus=E6=8C=89?= =?UTF-8?q?=E9=9C=80=E8=BD=BD=E5=85=A5=E6=97=B6=EF=BC=8C=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E5=AF=B9=E5=BA=94=E7=9A=84=E6=A0=B7=E5=BC=8F=E6=96=87=E4=BB=B6?= =?UTF-8?q?=E4=BC=9A=E5=AF=BC=E8=87=B4vite=E9=87=8D=E5=A4=8D=E9=87=8D?= =?UTF-8?q?=E8=BD=BD=E9=A1=B5=E9=9D=A2=E5=B9=B6=E5=8A=A0=E8=BD=BD=E5=BE=88?= =?UTF-8?q?=E6=85=A2=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- pnpm-lock.yaml | 63 ++++++++++------------ src/elementPlusServer.js | 2 + src/layout/components/SubSidebar/index.vue | 2 +- src/main.js | 5 +- vite.config.js | 38 +++++++++---- vite/plugins/components.js | 8 +-- vite/plugins/index.js | 2 +- 8 files changed, 67 insertions(+), 55 deletions(-) create mode 100644 src/elementPlusServer.js diff --git a/package.json b/package.json index 0dfbbcfe..79396baf 100644 --- a/package.json +++ b/package.json @@ -52,7 +52,7 @@ "postcss-html": "^1.4.1", "postcss-scss": "^4.0.4", "sass": "^1.52.1", - "stylelint": "^14.8.2", + "stylelint": "^14.8.3", "stylelint-config-recommended-scss": "^6.0.0", "stylelint-config-recommended-vue": "^1.4.0", "stylelint-config-standard": "^25.0.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bbc62e21..a5db2710 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,7 +11,7 @@ specifiers: '@vueuse/integrations': ^8.5.0 axios: ^0.27.2 dayjs: ^1.11.2 - element-plus: ^2.2.0 + element-plus: 2.2.0 eslint: ^8.16.0 eslint-plugin-vue: ^9.0.1 esno: ^0.16.3 @@ -32,7 +32,7 @@ specifiers: postcss-scss: ^4.0.4 qs: ^6.10.3 sass: ^1.52.1 - stylelint: ^14.8.2 + stylelint: ^14.8.3 stylelint-config-recommended-scss: ^6.0.0 stylelint-config-recommended-vue: ^1.4.0 stylelint-config-standard: ^25.0.0 @@ -93,11 +93,11 @@ devDependencies: postcss-html: 1.4.1 postcss-scss: 4.0.4 sass: 1.52.1 - stylelint: 14.8.2 - stylelint-config-recommended-scss: 6.0.0_stylelint@14.8.2 - stylelint-config-recommended-vue: 1.4.0_wdct7lrbpt3f5qukrrtdrzdofe - stylelint-config-standard: 25.0.0_stylelint@14.8.2 - stylelint-scss: 4.2.0_stylelint@14.8.2 + stylelint: 14.8.3 + stylelint-config-recommended-scss: 6.0.0_stylelint@14.8.3 + stylelint-config-recommended-vue: 1.4.0_qry3c7tpre6jvvuytvffjzlnpe + stylelint-config-standard: 25.0.0_stylelint@14.8.3 + stylelint-scss: 4.2.0_stylelint@14.8.3 svgo: 2.8.0 unplugin-auto-import: 0.7.2_4xyn6ao5ngwbgzbefoyccvabvi unplugin-vue-components: 0.19.5_vite@2.9.9+vue@3.2.33 @@ -1163,8 +1163,8 @@ packages: engines: {node: '>=8'} dev: true - /async-validator/4.0.7: - resolution: {integrity: sha512-Pj2IR7u8hmUEDOwB++su6baaRi+QvsgajuFB9j95foM1N2gy5HM4z60hfusIO0fBPG5uLAEl6yCJr1jNSVugEQ==} + /async-validator/4.1.1: + resolution: {integrity: sha512-p4DO/JXwjs8klJyJL8Q2oM4ks5fUTze/h5k10oPPKMiLe1fj3G1QMzPHNmN1Py4ycOk7WlO2DcGXv1qiESJCZA==} dev: false /async/0.9.2: @@ -2116,7 +2116,7 @@ packages: '@types/lodash': 4.14.182 '@types/lodash-es': 4.17.6 '@vueuse/core': 8.5.0_vue@3.2.33 - async-validator: 4.0.7 + async-validator: 4.1.1 dayjs: 1.11.2 escape-html: 1.0.3 lodash: 4.17.21 @@ -4701,10 +4701,6 @@ packages: engines: {node: '>=0.10.0'} dev: true - /normalize-selector/0.2.0: - resolution: {integrity: sha1-0LFF62kRicY6eNIB3E/bEpPvDAM=, tarball: normalize-selector/download/normalize-selector-0.2.0.tgz} - dev: true - /normalize-wheel-es/1.1.2: resolution: {integrity: sha512-scX83plWJXYH1J4+BhAuIHadROzxX0UBF3+HuZNY2Ks8BciE7tSTQ+5JhTsvzjaO0/EJdm4JBGrfObKxFf3Png==} dev: false @@ -6002,7 +5998,7 @@ packages: resolution: {integrity: sha1-eVjHk+R+MuB9K1yv5cC/jhLneQI=, tarball: style-search/download/style-search-0.1.0.tgz} dev: true - /stylelint-config-html/1.0.0_wdct7lrbpt3f5qukrrtdrzdofe: + /stylelint-config-html/1.0.0_qry3c7tpre6jvvuytvffjzlnpe: resolution: {integrity: sha1-FyrLmW7kyFToxnD8/3f/DZjTvsI=, registry: https://registry.npm.taobao.org/, tarball: https://registry.npm.taobao.org/stylelint-config-html/download/stylelint-config-html-1.0.0.tgz} engines: {node: ^12 || >=14} peerDependencies: @@ -6010,23 +6006,23 @@ packages: stylelint: '>=14.0.0' dependencies: postcss-html: 1.4.1 - stylelint: 14.8.2 + stylelint: 14.8.3 dev: true - /stylelint-config-recommended-scss/6.0.0_stylelint@14.8.2: + /stylelint-config-recommended-scss/6.0.0_stylelint@14.8.3: resolution: {integrity: sha512-6QOe2/OzXV2AP5FE12A7+qtKdZik7Saf42SMMl84ksVBBPpTdrV+9HaCbPYiRMiwELY9hXCVdH4wlJ+YJb5eig==} peerDependencies: stylelint: ^14.4.0 dependencies: postcss-scss: 4.0.4 - stylelint: 14.8.2 - stylelint-config-recommended: 7.0.0_stylelint@14.8.2 - stylelint-scss: 4.2.0_stylelint@14.8.2 + stylelint: 14.8.3 + stylelint-config-recommended: 7.0.0_stylelint@14.8.3 + stylelint-scss: 4.2.0_stylelint@14.8.3 transitivePeerDependencies: - postcss dev: true - /stylelint-config-recommended-vue/1.4.0_wdct7lrbpt3f5qukrrtdrzdofe: + /stylelint-config-recommended-vue/1.4.0_qry3c7tpre6jvvuytvffjzlnpe: resolution: {integrity: sha512-DVJqyX2KvMCn9U0+keL12r7xlsH26K4Vg8NrIZuq5MoF7g82DpMp326Om4E0Q+Il1o+bTHuUyejf2XAI0iD04Q==} engines: {node: ^12 || >=14} peerDependencies: @@ -6035,29 +6031,29 @@ packages: dependencies: postcss-html: 1.4.1 semver: 7.3.5 - stylelint: 14.8.2 - stylelint-config-html: 1.0.0_wdct7lrbpt3f5qukrrtdrzdofe - stylelint-config-recommended: 7.0.0_stylelint@14.8.2 + stylelint: 14.8.3 + stylelint-config-html: 1.0.0_qry3c7tpre6jvvuytvffjzlnpe + stylelint-config-recommended: 7.0.0_stylelint@14.8.3 dev: true - /stylelint-config-recommended/7.0.0_stylelint@14.8.2: + /stylelint-config-recommended/7.0.0_stylelint@14.8.3: resolution: {integrity: sha512-yGn84Bf/q41J4luis1AZ95gj0EQwRX8lWmGmBwkwBNSkpGSpl66XcPTulxGa/Z91aPoNGuIGBmFkcM1MejMo9Q==} peerDependencies: stylelint: ^14.4.0 dependencies: - stylelint: 14.8.2 + stylelint: 14.8.3 dev: true - /stylelint-config-standard/25.0.0_stylelint@14.8.2: + /stylelint-config-standard/25.0.0_stylelint@14.8.3: resolution: {integrity: sha512-21HnP3VSpaT1wFjFvv9VjvOGDtAviv47uTp3uFmzcN+3Lt+RYRv6oAplLaV51Kf792JSxJ6svCJh/G18E9VnCA==} peerDependencies: stylelint: ^14.4.0 dependencies: - stylelint: 14.8.2 - stylelint-config-recommended: 7.0.0_stylelint@14.8.2 + stylelint: 14.8.3 + stylelint-config-recommended: 7.0.0_stylelint@14.8.3 dev: true - /stylelint-scss/4.2.0_stylelint@14.8.2: + /stylelint-scss/4.2.0_stylelint@14.8.3: resolution: {integrity: sha512-HHHMVKJJ5RM9pPIbgJ/XA67h9H0407G68Rm69H4fzFbFkyDMcTV1Byep3qdze5+fJ3c0U7mJrbj6S0Fg072uZA==} peerDependencies: stylelint: ^14.5.1 @@ -6067,11 +6063,11 @@ packages: postcss-resolve-nested-selector: registry.nlark.com/postcss-resolve-nested-selector/0.1.1 postcss-selector-parser: registry.nlark.com/postcss-selector-parser/6.0.6 postcss-value-parser: registry.nlark.com/postcss-value-parser/4.1.0 - stylelint: 14.8.2 + stylelint: 14.8.3 dev: true - /stylelint/14.8.2: - resolution: {integrity: sha512-tjDfexCYfoPdl/xcDJ9Fv+Ko9cvzbDnmdiaqEn3ovXHXasi/hbkt5tSjsiReQ+ENqnz0eltaX/AOO+AlzVdcNA==} + /stylelint/14.8.3: + resolution: {integrity: sha512-aLpskXwSgFEBYbFRKA/BfuyYMGuXNtn2t5GqoffNPSezvw97x/vVNWcZNF0+cwt+LBjfvyq9/MRE3OjInGRgNA==} engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} hasBin: true dependencies: @@ -6098,7 +6094,6 @@ packages: meow: 9.0.0 micromatch: 4.0.5 normalize-path: 3.0.0 - normalize-selector: 0.2.0 picocolors: 1.0.0 postcss: 8.4.13 postcss-media-query-parser: 0.2.3 diff --git a/src/elementPlusServer.js b/src/elementPlusServer.js new file mode 100644 index 00000000..6c9e80db --- /dev/null +++ b/src/elementPlusServer.js @@ -0,0 +1,2 @@ +// 误删，该文件用于解决 element plus 在开发环境下按需引入导致页面频繁刷新的问题 +export default function importElementPlus() {} diff --git a/src/layout/components/SubSidebar/index.vue b/src/layout/components/SubSidebar/index.vue index a3a89f5e..a537a202 100644 --- a/src/layout/components/SubSidebar/index.vue +++ b/src/layout/components/SubSidebar/index.vue @@ -57,7 +57,7 @@ function onSidebarScroll(e) { bottom: 0; background-color: var(--g-sub-sidebar-bg); box-shadow: 10px 0 10px -10px var(--g-box-shadow-color); - transition: background-color 0.3s, var(--el-transition-box-shadow), left 0.3s; + transition: background-color 0.3s, var(--el-transition-box-shadow), left 0.3s, width 0.3s; &.is-collapse { width: 64px; .sidebar-logo { diff --git a/src/main.js b/src/main.js index 8c069b24..10be4385 100644 --- a/src/main.js +++ b/src/main.js @@ -8,9 +8,8 @@ app.use(pinia) import router from './router' app.use(router) -import ElementPlus from 'element-plus' -import 'element-plus/dist/index.css' -app.use(ElementPlus) +import importElementPlus from '@/elementPlusServer' +importElementPlus(app) import globalProperties from '@/util/global.properties' globalProperties(app) diff --git a/vite.config.js b/vite.config.js index 2c2e1862..d3b480cb 100644 --- a/vite.config.js +++ b/vite.config.js @@ -21,15 +21,6 @@ export default ({ mode, command }) => { scssResources.push(`@use "src/assets/sprites/_${dirname}.scss" as *;`) } }) - // BUG https://github.com/element-plus/element-plus/issues/4916 - const optimizeDepsElementPlusIncludes = ['element-plus/es'] - fs.readdirSync('node_modules/element-plus/es/components').map(dirname => { - fs.access(`node_modules/element-plus/es/components/${dirname}/style/css.mjs`, err => { - if (!err) { - optimizeDepsElementPlusIncludes.push(`element-plus/es/components/${dirname}/style/css`) - } - }) - }) return defineConfig({ base: './', // 开发服务器选项 https://cn.vitejs.dev/config/#server-options @@ -56,9 +47,34 @@ export default ({ mode, command }) => { } }, optimizeDeps: { - include: optimizeDepsElementPlusIncludes + include: [ + 'element-plus/es', + 'element-plus/es/components/message/style/css', + 'element-plus/es/components/notification/style/css', + 'element-plus/es/components/message-box/style/css' + ] }, - plugins: createVitePlugins(env, command === 'build'), + plugins: [ + ...createVitePlugins(env, command === 'build'), + // BUG https://github.com/antfu/unplugin-vue-components/issues/361 + { + name: 'dev-auto-import-element-plus', + transform(code, id) { + if (command === 'serve' && /src\/elementPlusServer.js$/.test(id)) { + return { + code: ` +import ElementPlus from 'element-plus'; +import 'element-plus/dist/index.css'; +export default function importElementPlus(app) { + app.use(ElementPlus); +} +`, + map: null + } + } + } + } + ], resolve: { alias: { '@': path.resolve(__dirname, 'src') diff --git a/vite/plugins/components.js b/vite/plugins/components.js index 0e2e47ee..bc0ed749 100644 --- a/vite/plugins/components.js +++ b/vite/plugins/components.js @@ -1,11 +1,11 @@ import components from 'unplugin-vue-components/vite' import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' -export default function createComponents() { +export default function createComponents(isBuild) { + const resolvers = [] + isBuild && resolvers.push(ElementPlusResolver()) return components({ - resolvers: [ - ElementPlusResolver() - ], + resolvers, dirs: ['src/components'], include: [/\.vue$/, /\.vue\?vue/, /\.jsx$/], dts: false diff --git a/vite/plugins/index.js b/vite/plugins/index.js index 53216720..7c10c0d8 100644 --- a/vite/plugins/index.js +++ b/vite/plugins/index.js @@ -20,7 +20,7 @@ export default function createVitePlugins(viteEnv, isBuild = false) { vitePlugins.push(createJsx()) vitePlugins.push(createHtml(viteEnv, isBuild)) vitePlugins.push(createAutoImport()) - vitePlugins.push(createComponents()) + vitePlugins.push(createComponents(isBuild)) vitePlugins.push(createSetupExtend()) vitePlugins.push(createSvgIcon(isBuild)) vitePlugins.push(createMock(viteEnv, isBuild))