Vue3 + Vite + Ant design vue + Windi CSS

 1、新建项目

npm init vue@latest

在本地搭建 Vue 单页应用。创建的项目将使用基于Vite的构建设置，并允许我们使用 Vue 的单文件组件(SFC)。

Vite 官网：https://vitejs.cn
Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方法，它允许快速提供代码。

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：

2、使用 Windi CSS

Windi CSS 的设计灵感来源于 Tailwindcss，而 Windi CSS 比 Tailwindcss 有更快的加载体验。

Windi CSS 是一款提供功能类的 CSS 框架，最直观的特点就是，你的 CSS 不用离开 HTML 就能够使样式生效，即在 Vue 文件里面，你将不再需要写 style 标签来装载你的 CSS，而是通过 class 工具类，或者「自定义前缀 + 属性模式」来控制 CSS 样式的效果，这些 class 工具类或者属性模式都是 Windi CSS 内部现成的，或者是通过 Windi CSS 配置文件配置的。

npm i vite-plugin-windicss -D

3、配置

vite.config.js

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({
  plugins: [vue(), vueJsx(), windiCSS()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

新建 Windi CSS 配置文件

这个文件是没有的，需要手动添加，与 vite.config.js 同级。

文件名可以是以下其中的一个，它们都能够被识别。

• windi.config.js
• tailwind.config.js

TypeScript 项目则是：

• tailwind.config.ts
• windi.config.ts

windi.config.ts

import { defineConfig } from 'vite-plugin-windicss'

export default defineConfig({})

配置查看：Integration for Vite | Windi CSS

main.ts

import 'virtual:windi-base.css'
import 'virtual:windi-components.css'
import 'virtual:windi-utilities.css'

import App from './App.vue'
import router from './router'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

const app = createApp(App)

app.use(createPinia())
app.use(router)

app.mount('#app')

4、使用 Ant design vue

添加Ant Design组件库和icon图标组件

npm i ant-design-vue @ant-design/icons-vue -S

按需加载

src\components\registerGlobComp.ts

import { Button, Input, Layout } from 'ant-design-vue'
import type { App } from 'vue'

export function registerGlobComp(app: App) {
  app.use(Input).use(Button).use(Layout)
}

main.ts

import 'virtual:windi-base.css'
import 'virtual:windi-components.css'
import 'ant-design-vue/dist/antd.css'
import '@/assets/style/index.less'
import 'virtual:windi-utilities.css'

import App from './App.vue'
import router from './router'

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { registerGlobComp } from '@/components/registerGlobComp'

const app = createApp(App)
// 注册全局组件
registerGlobComp(app)

app.use(createPinia())
app.use(router)

app.mount('#app')

除Button, Input, Layout组件外，需要使用其他组件的话，需要从ant-design-vue引入并且注册，这样符合vite按需使用的理念。

import { Avatar } from 'ant-design-vue'
export default defineComponent({
  components: {
    Avatar
  }
})

5、体验

ant-design-vue 与 windicss样式冲突

icon图标出现偏下的问题，原因是被windicss的样式覆盖了

解决冲突

src\assets\style\index.less

新建全局样式文件

span.anticon {
  vertical-align: 0.125em !important;
}

安装less依赖包，不需要在安装less-loader

npm install less -D

vertical-align: values使元素的基线对齐到父元素的基线之上的给定长度。

使用em根据自身的font-size确定px像素。

参考文章：

重新构想原子化CSS

Windi CSS 在 Vue3 + Vite 项目中的使用 - 掘金