diff --git a/.vscode/extensions.json b/.vscode/extensions.json index 30e116c..e59b0cf 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -1,5 +1,6 @@ { "recommendations": [ + "voorjaar.windicss-intellisense", "stylelint.vscode-stylelint", "dbaeumer.vscode-eslint", "esbenp.prettier-vscode", diff --git a/.vscode/settings.json b/.vscode/settings.json index b4e6050..63e4441 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -6,6 +6,7 @@ * vscode-icons * i18n Ally * Iconify IntelliSense + * WindiCSS IntelliSense * TypeScript Vue Plugin (Volar) * Vue Language Features (Volar) */ diff --git a/package.json b/package.json index 30f1107..52b1326 100644 --- a/package.json +++ b/package.json @@ -102,8 +102,10 @@ "vite-plugin-mock": "^2.9.6", "vite-plugin-remove-console": "^0.0.5", "vite-plugin-style-import": "^1.2.1", + "vite-plugin-windicss": "^1.6.1", "vite-svg-loader": "^2.2.0", - "vue-eslint-parser": "7.10.0" + "vue-eslint-parser": "7.10.0", + "windicss": "^3.4.2" }, "repository": "git@github.com:xiaoxian521/vue-pure-admin.git", "author": "xiaoxian521", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5164c48..3da86dc 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -69,12 +69,14 @@ specifiers: vite-plugin-mock: ^2.9.6 vite-plugin-remove-console: ^0.0.5 vite-plugin-style-import: ^1.2.1 + vite-plugin-windicss: ^1.6.1 vite-svg-loader: ^2.2.0 vue: ^3.2.24 vue-eslint-parser: 7.10.0 vue-i18n: ^9.2.0-beta.3 vue-router: ^4.0.12 vue-types: ^4.1.0 + windicss: ^3.4.2 dependencies: "@ctrl/tinycolor": 3.4.0 @@ -151,10 +153,21 @@ devDependencies: vite-plugin-mock: 2.9.6_mockjs@1.1.0+vite@2.6.14 vite-plugin-remove-console: 0.0.5 vite-plugin-style-import: 1.3.0_vite@2.6.14 + vite-plugin-windicss: 1.6.1_vite@2.6.14 vite-svg-loader: 2.2.0 vue-eslint-parser: 7.10.0_eslint@7.30.0 + windicss: 3.4.2 packages: + /@antfu/utils/0.3.0: + resolution: + { + integrity: sha512-UU8TLr/EoXdg7OjMp0h9oDoIAVr+Z/oW9cpOxQQyrsz6Qzd2ms/1CdWx8fl2OQdFpxGmq5Vc4TwfLHId6nAZjA== + } + dependencies: + "@types/throttle-debounce": 2.1.0 + dev: true + /@babel/code-frame/7.12.11: resolution: { @@ -529,7 +542,7 @@ packages: "@babel/helper-split-export-declaration": 7.16.0 "@babel/parser": 7.16.2 "@babel/types": 7.16.0 - debug: 4.3.2 + debug: 4.3.3 globals: 11.12.0 transitivePeerDependencies: - supports-color @@ -1140,6 +1153,13 @@ packages: "@types/node": 14.14.14 dev: true + /@types/throttle-debounce/2.1.0: + resolution: + { + integrity: sha512-5eQEtSCoESnh2FsiLTxE121IiE60hnMqcb435fShf4bpLRjEu1Eoekht23y6zXS9Ts3l+Szu3TARnTsA0GkOkQ== + } + dev: true + /@types/unist/2.0.6: resolution: { @@ -1596,6 +1616,36 @@ packages: vue-demi: 0.12.1_vue@3.2.24 dev: false + /@windicss/config/1.6.1: + resolution: + { + integrity: sha512-E4FKtWdYl5HwFknBQ+Z2JIF58TZiR4/ZiP8B30sfRxNlG6clh4agn5MJqTb4ER0MLkDb30Hugl2tGun0AQNbFw== + } + dependencies: + debug: 4.3.3 + jiti: 1.12.9 + windicss: 3.4.2 + transitivePeerDependencies: + - supports-color + dev: true + + /@windicss/plugin-utils/1.6.1: + resolution: + { + integrity: sha512-hFQY27bOr9SSpekIvSwBpIX25nR4cwrU5/1kJFqCwAzqyazvd7U9c/iI1E2sTEQOkPbpTTJkY2Act21Q70oSDQ== + } + dependencies: + "@antfu/utils": 0.3.0 + "@windicss/config": 1.6.1 + debug: 4.3.3 + fast-glob: 3.2.7 + magic-string: 0.25.7 + micromatch: 4.0.4 + windicss: 3.4.2 + transitivePeerDependencies: + - supports-color + dev: true + /@zougt/some-loader-utils/1.4.1_sass@1.45.0: resolution: { @@ -2674,6 +2724,21 @@ packages: ms: 2.1.2 dev: true + /debug/4.3.3: + resolution: + { + integrity: sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q== + } + engines: { node: ">=6.0" } + peerDependencies: + supports-color: "*" + peerDependenciesMeta: + supports-color: + optional: true + dependencies: + ms: 2.1.2 + dev: true + /decamelize-keys/1.1.0: resolution: { integrity: sha1-0XGoeTMlKAfrPLYdwcFEXQeN8tk= } engines: { node: ">=0.10.0" } @@ -4259,6 +4324,14 @@ packages: resolution: { integrity: sha1-6PvzdNxVb/iUehDcsFctYz8s+hA= } dev: true + /jiti/1.12.9: + resolution: + { + integrity: sha512-TdcJywkQtcwLxogc4rSMAi479G2eDPzfW0fLySks7TPhgZZ4s/tM6stnzayIh3gS/db3zExWJyUx4cNWrwAmoQ== + } + hasBin: true + dev: true + /js-cookie/3.0.1: resolution: { @@ -4369,6 +4442,13 @@ packages: } dev: true + /kolorist/1.5.1: + resolution: + { + integrity: sha512-lxpCM3HTvquGxKGzHeknB/sUjuVoUElLlfYnXZT73K8geR9jQbroGlSCFBax9/0mpGoD3kzcMLnOlGQPJJNyqQ== + } + dev: true + /levn/0.4.1: resolution: { @@ -4694,7 +4774,7 @@ packages: integrity: sha512-+WoovN/ppKolQOFIAajxi7Lu9kInbPxFuTBVEavFcL8eAfVstoc5MocPmqBeAdBOJV00uaVjegzH4+MA0DN/uA== } dependencies: - debug: 4.3.2 + debug: 4.3.3 parse-entities: 2.0.0 transitivePeerDependencies: - supports-color @@ -7136,6 +7216,23 @@ packages: - supports-color dev: true + /vite-plugin-windicss/1.6.1_vite@2.6.14: + resolution: + { + integrity: sha512-63uv4HqBxtSZB0WOtrZS8yhyfQPgGQwYgcBald+/BpLSlYJREcDKgX9Xd/qDgTAjpDRozxKQj/JWreIlyIahGg== + } + peerDependencies: + vite: ^2.0.1 + dependencies: + "@windicss/plugin-utils": 1.6.1 + debug: 4.3.3 + kolorist: 1.5.1 + vite: 2.6.14_sass@1.45.0 + windicss: 3.4.2 + transitivePeerDependencies: + - supports-color + dev: true + /vite-svg-loader/2.2.0: resolution: { @@ -7295,6 +7392,15 @@ packages: isexe: 2.0.0 dev: true + /windicss/3.4.2: + resolution: + { + integrity: sha512-YieqWaXiwPu0JJoB7z03RXdjZjQQJtMZAeXUXu/j3JXSMhIgV/2rUXu4Q7QrworRlbaASZlFhxjnL/78aAty+Q== + } + engines: { node: ">= 12" } + hasBin: true + dev: true + /word-wrap/1.2.3: resolution: { diff --git a/src/main.ts b/src/main.ts index eb5cb76..25527c4 100644 --- a/src/main.ts +++ b/src/main.ts @@ -10,6 +10,7 @@ import { useElementPlus } from "../src/plugins/element-plus"; import { injectResponsiveStorage } from "/@/utils/storage/responsive"; import "animate.css"; +import "virtual:windi.css"; // 导入公共样式 import "./style/index.scss"; // 导入字体图标 diff --git a/vite.config.ts b/vite.config.ts index c8ca3e2..f4f3ef8 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -3,6 +3,7 @@ import vue from "@vitejs/plugin-vue"; import svgLoader from "vite-svg-loader"; import legacy from "@vitejs/plugin-legacy"; import vueJsx from "@vitejs/plugin-vue-jsx"; +import WindiCSS from "vite-plugin-windicss"; import { warpperEnv, regExps } from "./build"; import fullReload from "vite-plugin-full-reload"; import { viteMockServe } from "vite-plugin-mock"; @@ -83,6 +84,7 @@ export default ({ command, mode }: ConfigEnv): UserConfigExport => { vue(), // jsx、tsx语法支持 vueJsx(), + WindiCSS(), // 线上环境删除console removeConsole(), // 修改layout文件夹下的文件时自动重载浏览器 解决 https://github.com/xiaoxian521/vue-pure-admin/issues/170 diff --git a/windi.config.ts b/windi.config.ts new file mode 100644 index 0000000..9d7a3b1 --- /dev/null +++ b/windi.config.ts @@ -0,0 +1,51 @@ +// https://cn.windicss.org/ 中文文档 +import { defineConfig } from "windicss/helpers"; +import colors from "windicss/colors"; +import typography from "windicss/plugin/typography"; + +export default defineConfig({ + darkMode: "class", + attributify: true, + + plugins: [typography()], + theme: { + extend: { + zIndex: { + "-1": "-1" + }, + screens: { + sm: "576px", + md: "768px", + lg: "992px", + xl: "1200px", + "2xl": "1600px" + }, + typography: { + DEFAULT: { + css: { + maxWidth: "65ch", + color: "inherit", + a: { + color: "inherit", + opacity: 0.75, + fontWeight: "500", + textDecoration: "underline", + "&:hover": { + opacity: 1, + color: colors.teal[600] + } + }, + b: { color: "inherit" }, + strong: { color: "inherit" }, + em: { color: "inherit" }, + h1: { color: "inherit" }, + h2: { color: "inherit" }, + h3: { color: "inherit" }, + h4: { color: "inherit" }, + code: { color: "inherit" } + } + } + } + } + } +});