From c568f04f1d44a3bcc61825e1d4bb565f63b53428 Mon Sep 17 00:00:00 2001 From: xingyu Date: Tue, 20 Dec 2022 09:42:35 +0800 Subject: [PATCH 1/6] chore: update vite 4 --- README.md | 6 ++-- README.zh-CN.md | 6 ++-- package.json | 52 ++++++++++++++++---------------- src/components/Logo/src/Logo.vue | 50 +++++++++++++++--------------- tsconfig.json | 4 +-- vite.config.ts | 18 +++++------ 6 files changed, 69 insertions(+), 67 deletions(-) diff --git a/README.md b/README.md index cd17c1b..ddc3778 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ ## Introduction -vue-element-plus-admin is a free and open source middle and background template based on `element-plus`. Developed using the latest mainstream technologies such as `vue3`, `vite3` and `typescript`, the out of the box middle and background front-end solution can be used as the starting template of the project and learning reference. And always pay attention to the latest technological trends and update them as soon as possible. +vue-element-plus-admin is a free and open source middle and background template based on `element-plus`. Developed using the latest mainstream technologies such as `vue3`, `vite4` and `typescript`, the out of the box middle and background front-end solution can be used as the starting template of the project and learning reference. And always pay attention to the latest technological trends and update them as soon as possible. vue-element-plus-admin is positioned as a background integration scheme, which is not suitable for secondary development as a basic template. Because it integrates many functions that you may not use, it will cause a lot of code redundancy. If your project doesn't pay attention to this problem, you can also directly carry out secondary development based on it. @@ -17,7 +17,7 @@ If you need a basic template, please switch to the `tempalte` branch. `Tempalte` ## Feature -- **State of The Art Development**：Use front-end front-end technology development such as Vue3/vite3 +- **State of The Art Development**：Use front-end front-end technology development such as Vue3/vite4 - **TypeScript**: Application-level JavaScript language - **Theming**: Configurable themes - **International**：Built-in complete internationalization program @@ -46,7 +46,7 @@ account: **admin/admin test/test** ## Preparation - [node](http://nodejs.org/) and [git](https://git-scm.com/) - Project development environment -- [Vite](https://vitejs.dev/) - Familiar with vite features +- [Vite4](https://vitejs.dev/) - Familiar with vite features - [Vue3](https://v3.vuejs.org/) - Familiar with Vue basic syntax - [TypeScript](https://www.typescriptlang.org/) - Familiar with the basic syntax of `TypeScript` - [Es6+](http://es6.ruanyifeng.com/) - Familiar with es6 basic syntax diff --git a/README.zh-CN.md b/README.zh-CN.md index bb2c503..e7b24ad 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -9,7 +9,7 @@ ## 介绍 -vue-element-plus-admin 是一个基于 `element-plus` 免费开源的中后台模版。使用了最新的`vue3`，`vite3`，`TypeScript`等主流技术开发，开箱即用的中后台前端解决方案，可以用来作为项目的启动模版，也可用于学习参考。并且时刻关注着最新技术动向，尽可能的第一时间更新。 +vue-element-plus-admin 是一个基于 `element-plus` 免费开源的中后台模版。使用了最新的`vue3`，`vite4`，`TypeScript`等主流技术开发，开箱即用的中后台前端解决方案，可以用来作为项目的启动模版，也可用于学习参考。并且时刻关注着最新技术动向，尽可能的第一时间更新。 vue-element-plus-admin 的定位是后台集成方案，不太适合当基础模板来进行二次开发。因为集成了很多你可能用不到的功能，会造成不少的代码冗余。如果你的项目不关注这方面的问题，也可以直接基于它进行二次开发。 @@ -17,7 +17,7 @@ vue-element-plus-admin 的定位是后台集成方案，不太适合当基础模 ## 特性 -- **最新技术栈**：使用 Vue3/vite3 等前端前沿技术开发 +- **最新技术栈**：使用 Vue3/vite4 等前端前沿技术开发 - **TypeScript**: 应用程序级 JavaScript 的语言 - **主题**: 可配置的主题 - **国际化**：内置完善的国际化方案 @@ -46,7 +46,7 @@ vue-element-plus-admin 的定位是后台集成方案，不太适合当基础模 ## 前序准备 - [node](http://nodejs.org/) 和 [git](https://git-scm.com/) - 项目开发环境 -- [Vite](https://vitejs.dev/) - 熟悉 vite 特性 +- [Vite4](https://vitejs.dev/) - 熟悉 vite 特性 - [Vue3](https://v3.vuejs.org/) - 熟悉 Vue 基础语法 - [TypeScript](https://www.typescriptlang.org/) - 熟悉 `TypeScript` 基本语法 - [Es6+](http://es6.ruanyifeng.com/) - 熟悉 es6 基本语法 diff --git a/package.json b/package.json index 763e039..4482986 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "vue-element-plus-admin", "version": "1.8.7", - "description": "一套基于vue3、element-plus、typesScript、vite3的后台集成方案。", + "description": "一套基于vue3、element-plus、typesScript、vite4的后台集成方案。", "author": "Archer <502431556@qq.com>", "private": false, "scripts": { @@ -27,22 +27,22 @@ "analysis": "windicss-analysis" }, "dependencies": { - "@iconify/iconify": "^3.0.0", - "@vueuse/core": "^9.6.0", + "@iconify/iconify": "^3.0.1", + "@vueuse/core": "^9.7.0", "@wangeditor/editor": "^5.1.23", "@wangeditor/editor-for-vue": "^5.1.10", "@zxcvbn-ts/core": "^2.1.0", "animate.css": "^4.1.1", - "axios": "^1.2.0", - "echarts": "^5.4.0", + "axios": "^1.2.1", + "echarts": "^5.4.1", "echarts-wordcloud": "^2.1.0", - "element-plus": "2.2.25", + "element-plus": "2.2.27", "intro.js": "^6.0.0", "lodash-es": "^4.17.21", "mitt": "^3.0.0", "mockjs": "^1.1.0", "nprogress": "^0.2.0", - "pinia": "^2.0.27", + "pinia": "^2.0.28", "qrcode": "^1.5.1", "qs": "^6.11.0", "url": "^0.11.0", @@ -55,53 +55,53 @@ "devDependencies": { "@commitlint/cli": "^17.3.0", "@commitlint/config-conventional": "^17.3.0", - "@iconify/json": "^2.1.145", - "@intlify/vite-plugin-vue-i18n": "^6.0.3", + "@iconify/json": "^2.1.154", + "@intlify/unplugin-vue-i18n": "^0.8.1", "@purge-icons/generated": "^0.9.0", "@types/intro.js": "^5.1.0", "@types/lodash-es": "^4.17.6", - "@types/node": "^18.11.9", + "@types/node": "^18.11.17", "@types/nprogress": "^0.2.0", "@types/qrcode": "^1.5.0", "@types/qs": "^6.9.7", - "@typescript-eslint/eslint-plugin": "^5.44.0", - "@typescript-eslint/parser": "^5.44.0", - "@vitejs/plugin-vue": "^3.2.0", - "@vitejs/plugin-vue-jsx": "^2.1.1", + "@typescript-eslint/eslint-plugin": "^5.47.0", + "@typescript-eslint/parser": "^5.47.0", + "@vitejs/plugin-vue": "^4.0.0", + "@vitejs/plugin-vue-jsx": "^3.0.0", "autoprefixer": "^10.4.13", "consola": "^2.15.3", - "eslint": "^8.28.0", + "eslint": "^8.30.0", "eslint-config-prettier": "^8.5.0", "eslint-define-config": "^1.12.0", "eslint-plugin-prettier": "^4.2.1", "eslint-plugin-vue": "^9.8.0", "husky": "^8.0.2", "less": "^4.1.3", - "lint-staged": "^13.0.4", + "lint-staged": "^13.1.0", "plop": "^3.1.1", - "postcss": "^8.4.19", + "postcss": "^8.4.20", "postcss-html": "^1.5.0", "postcss-less": "^6.0.0", - "prettier": "^2.8.0", + "prettier": "^2.8.1", "rimraf": "^3.0.2", - "rollup": "^3.5.0", - "stylelint": "^14.15.0", + "rollup": "^3.7.5", + "stylelint": "^14.16.0", "stylelint-config-html": "^1.1.0", "stylelint-config-prettier": "^9.0.4", "stylelint-config-recommended": "^9.0.0", "stylelint-config-standard": "^29.0.0", "stylelint-order": "^5.0.0", - "typescript": "4.9.3", - "unplugin-vue-macros": "^1.0.3", - "vite": "3.2.4", + "typescript": "4.9.4", + "unplugin-vue-define-options": "^1.1.1", + "vite": "4.0.2", "vite-plugin-ejs": "^1.6.4", "vite-plugin-eslint": "^1.8.1", "vite-plugin-mock": "^2.9.6", - "vite-plugin-purge-icons": "^0.9.1", + "vite-plugin-purge-icons": "^0.9.2", "vite-plugin-style-import": "2.0.0", "vite-plugin-svg-icons": "^2.0.1", - "vite-plugin-windicss": "^1.8.8", - "vue-tsc": "^1.0.9", + "vite-plugin-windicss": "^1.8.10", + "vue-tsc": "^1.0.14", "windicss": "^3.5.6", "windicss-analysis": "^0.3.5" }, diff --git a/src/components/Logo/src/Logo.vue b/src/components/Logo/src/Logo.vue index f7dffe2..bd7f9ab 100644 --- a/src/components/Logo/src/Logo.vue +++ b/src/components/Logo/src/Logo.vue @@ -55,31 +55,33 @@ watch( diff --git a/tsconfig.json b/tsconfig.json index 492e9f0..d53cf62 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -24,13 +24,13 @@ "@/*": ["src/*"] }, "types": [ - "@intlify/vite-plugin-vue-i18n/client", + "@intlify/unplugin-vue-i18n/types", "vite/client", "element-plus/global", "@types/intro.js", "@types/qrcode", "vite-plugin-svg-icons/client", - "unplugin-vue-macros/macros-global" + "unplugin-vue-define-options/macros-global" ], "typeRoots": ["./node_modules/@types/", "./types"] }, diff --git a/vite.config.ts b/vite.config.ts index c3ec278..71de07a 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -2,16 +2,16 @@ import { resolve } from 'path' import { loadEnv } from 'vite' import type { UserConfig, ConfigEnv } from 'vite' import Vue from '@vitejs/plugin-vue' -import WindiCSS from 'vite-plugin-windicss' import VueJsx from '@vitejs/plugin-vue-jsx' +import WindiCSS from 'vite-plugin-windicss' import EslintPlugin from 'vite-plugin-eslint' -import VueI18n from '@intlify/vite-plugin-vue-i18n' -import { createStyleImportPlugin, ElementPlusResolve } from 'vite-plugin-style-import' -import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' -import PurgeIcons from 'vite-plugin-purge-icons' -import { viteMockServe } from 'vite-plugin-mock' -import VueMarcos from 'unplugin-vue-macros/vite' import { ViteEjsPlugin } from "vite-plugin-ejs" +import { viteMockServe } from 'vite-plugin-mock' +import PurgeIcons from 'vite-plugin-purge-icons' +import VueI18nPlugin from "@intlify/unplugin-vue-i18n/vite" +import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' +import DefineOptions from "unplugin-vue-define-options/vite" +import { createStyleImportPlugin, ElementPlusResolve } from 'vite-plugin-style-import' // https://vitejs.dev/config/ const root = process.cwd() @@ -48,7 +48,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => { cache: false, include: ['src/**/*.vue', 'src/**/*.ts', 'src/**/*.tsx'] // 检查的文件 }), - VueI18n({ + VueI18nPlugin({ runtimeOnly: true, compositionOnly: true, include: [resolve(__dirname, 'src/locales/**')] @@ -70,7 +70,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => { setupProdMockServer() ` }), - VueMarcos(), + DefineOptions(), ViteEjsPlugin({ title: env.VITE_APP_TITLE }) From 8781571fdc942db5f0c3124e937271fc8cbec3dc Mon Sep 17 00:00:00 2001 From: xingyu Date: Tue, 20 Dec 2022 09:50:06 +0800 Subject: [PATCH 2/6] chore: add plugin-legacy --- .husky/pre-commit | 2 +- package.json | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/.husky/pre-commit b/.husky/pre-commit index a6a2318..9a37df9 100644 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -4,5 +4,5 @@ [ -n "$CI" ] && exit 0 # Format and submit code according to lintstagedrc.js configuration -npm run ts:check +# npm run ts:check npm run lint:lint-staged diff --git a/package.json b/package.json index 4482986..2bb0829 100644 --- a/package.json +++ b/package.json @@ -66,6 +66,7 @@ "@types/qs": "^6.9.7", "@typescript-eslint/eslint-plugin": "^5.47.0", "@typescript-eslint/parser": "^5.47.0", + "@vitejs/plugin-legacy": "^3.0.1", "@vitejs/plugin-vue": "^4.0.0", "@vitejs/plugin-vue-jsx": "^3.0.0", "autoprefixer": "^10.4.13", From 11b85051e7a77cb4be2684e25806a94f838a5e22 Mon Sep 17 00:00:00 2001 From: xingyu Date: Tue, 20 Dec 2022 09:51:43 +0800 Subject: [PATCH 3/6] chore: add terser --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 2bb0829..3b09a28 100644 --- a/package.json +++ b/package.json @@ -92,6 +92,7 @@ "stylelint-config-recommended": "^9.0.0", "stylelint-config-standard": "^29.0.0", "stylelint-order": "^5.0.0", + "terser": "^5.16.1", "typescript": "4.9.4", "unplugin-vue-define-options": "^1.1.1", "vite": "4.0.2", From 6fe5b2e6c781b251bff5f0ac936c04dcfe5ef95f Mon Sep 17 00:00:00 2001 From: xingyu Date: Tue, 20 Dec 2022 10:11:09 +0800 Subject: [PATCH 4/6] fix: husky --- .husky/pre-commit | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.husky/pre-commit b/.husky/pre-commit index 9a37df9..a6a2318 100644 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -4,5 +4,5 @@ [ -n "$CI" ] && exit 0 # Format and submit code according to lintstagedrc.js configuration -# npm run ts:check +npm run ts:check npm run lint:lint-staged From 354e87f7c533ad8e93ef484b47d0fe16f17048c9 Mon Sep 17 00:00:00 2001 From: xingyu Date: Wed, 21 Dec 2022 09:15:01 +0800 Subject: [PATCH 5/6] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=89=93?= =?UTF-8?q?=E5=8C=85=E8=BF=9B=E5=BA=A6=E6=9D=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + vite.config.ts | 2 ++ 2 files changed, 3 insertions(+) diff --git a/package.json b/package.json index 3b09a28..088feba 100644 --- a/package.json +++ b/package.json @@ -99,6 +99,7 @@ "vite-plugin-ejs": "^1.6.4", "vite-plugin-eslint": "^1.8.1", "vite-plugin-mock": "^2.9.6", + "vite-plugin-progress": "^0.0.6", "vite-plugin-purge-icons": "^0.9.2", "vite-plugin-style-import": "2.0.0", "vite-plugin-svg-icons": "^2.0.1", diff --git a/vite.config.ts b/vite.config.ts index 71de07a..2bc1350 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -4,6 +4,7 @@ import type { UserConfig, ConfigEnv } from 'vite' import Vue from '@vitejs/plugin-vue' import VueJsx from '@vitejs/plugin-vue-jsx' import WindiCSS from 'vite-plugin-windicss' +import progress from 'vite-plugin-progress' import EslintPlugin from 'vite-plugin-eslint' import { ViteEjsPlugin } from "vite-plugin-ejs" import { viteMockServe } from 'vite-plugin-mock' @@ -34,6 +35,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => { Vue(), VueJsx(), WindiCSS(), + progress(), createStyleImportPlugin({ resolves: [ElementPlusResolve()], libs: [{ From 828acb843cfe207724e400e3d42174c1c4630ee7 Mon Sep 17 00:00:00 2001 From: xingyu Date: Wed, 21 Dec 2022 09:33:03 +0800 Subject: [PATCH 6/6] chore: update deps --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 088feba..0e65b40 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ }, "dependencies": { "@iconify/iconify": "^3.0.1", - "@vueuse/core": "^9.7.0", + "@vueuse/core": "^9.8.2", "@wangeditor/editor": "^5.1.23", "@wangeditor/editor-for-vue": "^5.1.10", "@zxcvbn-ts/core": "^2.1.0", @@ -104,7 +104,7 @@ "vite-plugin-style-import": "2.0.0", "vite-plugin-svg-icons": "^2.0.1", "vite-plugin-windicss": "^1.8.10", - "vue-tsc": "^1.0.14", + "vue-tsc": "^1.0.16", "windicss": "^3.5.6", "windicss-analysis": "^0.3.5" },