Browse Source

feat: 添加WindiCSS支持

i18n
xiaoxian521 3 years ago
parent
commit
1f07597320
  1. 1
      .vscode/extensions.json
  2. 1
      .vscode/settings.json
  3. 4
      package.json
  4. 110
      pnpm-lock.yaml
  5. 1
      src/main.ts
  6. 2
      vite.config.ts
  7. 51
      windi.config.ts

1
.vscode/extensions.json

@ -1,5 +1,6 @@
{ {
"recommendations": [ "recommendations": [
"voorjaar.windicss-intellisense",
"stylelint.vscode-stylelint", "stylelint.vscode-stylelint",
"dbaeumer.vscode-eslint", "dbaeumer.vscode-eslint",
"esbenp.prettier-vscode", "esbenp.prettier-vscode",

1
.vscode/settings.json

@ -6,6 +6,7 @@
* vscode-icons * vscode-icons
* i18n Ally * i18n Ally
* Iconify IntelliSense * Iconify IntelliSense
* WindiCSS IntelliSense
* TypeScript Vue Plugin (Volar) * TypeScript Vue Plugin (Volar)
* Vue Language Features (Volar) * Vue Language Features (Volar)
*/ */

4
package.json

@ -102,8 +102,10 @@
"vite-plugin-mock": "^2.9.6", "vite-plugin-mock": "^2.9.6",
"vite-plugin-remove-console": "^0.0.5", "vite-plugin-remove-console": "^0.0.5",
"vite-plugin-style-import": "^1.2.1", "vite-plugin-style-import": "^1.2.1",
"vite-plugin-windicss": "^1.6.1",
"vite-svg-loader": "^2.2.0", "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", "repository": "git@github.com:xiaoxian521/vue-pure-admin.git",
"author": "xiaoxian521", "author": "xiaoxian521",

110
pnpm-lock.yaml

@ -69,12 +69,14 @@ specifiers:
vite-plugin-mock: ^2.9.6 vite-plugin-mock: ^2.9.6
vite-plugin-remove-console: ^0.0.5 vite-plugin-remove-console: ^0.0.5
vite-plugin-style-import: ^1.2.1 vite-plugin-style-import: ^1.2.1
vite-plugin-windicss: ^1.6.1
vite-svg-loader: ^2.2.0 vite-svg-loader: ^2.2.0
vue: ^3.2.24 vue: ^3.2.24
vue-eslint-parser: 7.10.0 vue-eslint-parser: 7.10.0
vue-i18n: ^9.2.0-beta.3 vue-i18n: ^9.2.0-beta.3
vue-router: ^4.0.12 vue-router: ^4.0.12
vue-types: ^4.1.0 vue-types: ^4.1.0
windicss: ^3.4.2
dependencies: dependencies:
"@ctrl/tinycolor": 3.4.0 "@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-mock: 2.9.6_mockjs@1.1.0+vite@2.6.14
vite-plugin-remove-console: 0.0.5 vite-plugin-remove-console: 0.0.5
vite-plugin-style-import: 1.3.0_vite@2.6.14 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 vite-svg-loader: 2.2.0
vue-eslint-parser: 7.10.0_eslint@7.30.0 vue-eslint-parser: 7.10.0_eslint@7.30.0
windicss: 3.4.2
packages: 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: /@babel/code-frame/7.12.11:
resolution: resolution:
{ {
@ -529,7 +542,7 @@ packages:
"@babel/helper-split-export-declaration": 7.16.0 "@babel/helper-split-export-declaration": 7.16.0
"@babel/parser": 7.16.2 "@babel/parser": 7.16.2
"@babel/types": 7.16.0 "@babel/types": 7.16.0
debug: 4.3.2
debug: 4.3.3
globals: 11.12.0 globals: 11.12.0
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
@ -1140,6 +1153,13 @@ packages:
"@types/node": 14.14.14 "@types/node": 14.14.14
dev: true dev: true
/@types/throttle-debounce/2.1.0:
resolution:
{
integrity: sha512-5eQEtSCoESnh2FsiLTxE121IiE60hnMqcb435fShf4bpLRjEu1Eoekht23y6zXS9Ts3l+Szu3TARnTsA0GkOkQ==
}
dev: true
/@types/unist/2.0.6: /@types/unist/2.0.6:
resolution: resolution:
{ {
@ -1596,6 +1616,36 @@ packages:
vue-demi: 0.12.1_vue@3.2.24 vue-demi: 0.12.1_vue@3.2.24
dev: false 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: /@zougt/some-loader-utils/1.4.1_sass@1.45.0:
resolution: resolution:
{ {
@ -2674,6 +2724,21 @@ packages:
ms: 2.1.2 ms: 2.1.2
dev: true 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: /decamelize-keys/1.1.0:
resolution: { integrity: sha1-0XGoeTMlKAfrPLYdwcFEXQeN8tk= } resolution: { integrity: sha1-0XGoeTMlKAfrPLYdwcFEXQeN8tk= }
engines: { node: ">=0.10.0" } engines: { node: ">=0.10.0" }
@ -4259,6 +4324,14 @@ packages:
resolution: { integrity: sha1-6PvzdNxVb/iUehDcsFctYz8s+hA= } resolution: { integrity: sha1-6PvzdNxVb/iUehDcsFctYz8s+hA= }
dev: true dev: true
/jiti/1.12.9:
resolution:
{
integrity: sha512-TdcJywkQtcwLxogc4rSMAi479G2eDPzfW0fLySks7TPhgZZ4s/tM6stnzayIh3gS/db3zExWJyUx4cNWrwAmoQ==
}
hasBin: true
dev: true
/js-cookie/3.0.1: /js-cookie/3.0.1:
resolution: resolution:
{ {
@ -4369,6 +4442,13 @@ packages:
} }
dev: true dev: true
/kolorist/1.5.1:
resolution:
{
integrity: sha512-lxpCM3HTvquGxKGzHeknB/sUjuVoUElLlfYnXZT73K8geR9jQbroGlSCFBax9/0mpGoD3kzcMLnOlGQPJJNyqQ==
}
dev: true
/levn/0.4.1: /levn/0.4.1:
resolution: resolution:
{ {
@ -4694,7 +4774,7 @@ packages:
integrity: sha512-+WoovN/ppKolQOFIAajxi7Lu9kInbPxFuTBVEavFcL8eAfVstoc5MocPmqBeAdBOJV00uaVjegzH4+MA0DN/uA== integrity: sha512-+WoovN/ppKolQOFIAajxi7Lu9kInbPxFuTBVEavFcL8eAfVstoc5MocPmqBeAdBOJV00uaVjegzH4+MA0DN/uA==
} }
dependencies: dependencies:
debug: 4.3.2
debug: 4.3.3
parse-entities: 2.0.0 parse-entities: 2.0.0
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
@ -7136,6 +7216,23 @@ packages:
- supports-color - supports-color
dev: true 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: /vite-svg-loader/2.2.0:
resolution: resolution:
{ {
@ -7295,6 +7392,15 @@ packages:
isexe: 2.0.0 isexe: 2.0.0
dev: true 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: /word-wrap/1.2.3:
resolution: resolution:
{ {

1
src/main.ts

@ -10,6 +10,7 @@ import { useElementPlus } from "../src/plugins/element-plus";
import { injectResponsiveStorage } from "/@/utils/storage/responsive"; import { injectResponsiveStorage } from "/@/utils/storage/responsive";
import "animate.css"; import "animate.css";
import "virtual:windi.css";
// 导入公共样式 // 导入公共样式
import "./style/index.scss"; import "./style/index.scss";
// 导入字体图标 // 导入字体图标

2
vite.config.ts

@ -3,6 +3,7 @@ import vue from "@vitejs/plugin-vue";
import svgLoader from "vite-svg-loader"; import svgLoader from "vite-svg-loader";
import legacy from "@vitejs/plugin-legacy"; import legacy from "@vitejs/plugin-legacy";
import vueJsx from "@vitejs/plugin-vue-jsx"; import vueJsx from "@vitejs/plugin-vue-jsx";
import WindiCSS from "vite-plugin-windicss";
import { warpperEnv, regExps } from "./build"; import { warpperEnv, regExps } from "./build";
import fullReload from "vite-plugin-full-reload"; import fullReload from "vite-plugin-full-reload";
import { viteMockServe } from "vite-plugin-mock"; import { viteMockServe } from "vite-plugin-mock";
@ -83,6 +84,7 @@ export default ({ command, mode }: ConfigEnv): UserConfigExport => {
vue(), vue(),
// jsx、tsx语法支持 // jsx、tsx语法支持
vueJsx(), vueJsx(),
WindiCSS(),
// 线上环境删除console // 线上环境删除console
removeConsole(), removeConsole(),
// 修改layout文件夹下的文件时自动重载浏览器 解决 https://github.com/xiaoxian521/vue-pure-admin/issues/170 // 修改layout文件夹下的文件时自动重载浏览器 解决 https://github.com/xiaoxian521/vue-pure-admin/issues/170

51
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" }
}
}
}
}
}
});
Loading…
Cancel
Save