CSS框架 --- Windin.css + vite + vue3.0 + Vscode的配置

前沿：

　　一款轻量级的css库 类似于bootstrap的css库 但是更轻量 不会初始化就全量加载进来  按需加载 前端开发中可以减少很多样式代码减少冗余样式代码 非常nice！

官网地址：https://cn.windicss.org/features/important-prefix.html

 

Vue3安装：

• 安装依赖

npm install -D vite-plugin-windicss windicss
// 或者yarn安装
yarn add vite-plugin-windicss windicss -dev

• Vue 中配置

//vite.config.ts
import { fileURLToPath, URL } from "node:url"

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import vueJsx from "@vitejs/plugin-vue-jsx"
import WindiCSS from "vite-plugin-windicss"

// https://vitejs.dev/config/
export default defineConfig({
  base: "./",
  plugins: [
    vue(),
    vueJsx(),
    WindiCSS()
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url))
    }
  },
  css: {
    postcss: {
      plugins: [
        {
          postcssPlugin: "internal: charset-removal",
          AtRule: {
            charset: (atRule) => {
              if (atRule.name === "charset") {
                atRule.remove()
              }
            }
          }
        }
      ]
    }
  }
})

• 导入样式

// main.ts
import WindiCSS from "vite-plugin-windicss"

　　注意：配置完一定要重新跑一下项目！！！！

• 使用

 

 

 

•  VSCode中plugin下载 WindiCSS IntelliSense