旧版vue 2+vue-cli集成windi css可行，须用vue-cli-plugin-windicss而非vite插件；执行vue add windicss自动安装配置，但需node≥14.18、标准cli项目，注意关闭preflight防样式冲突，@apply在scoped中不推荐使用，动态class需静态声明或手动extract扫描。
旧版 Vue 项目（Vue 2 + vue-cli）集成 Windi CSS 是可行的，但不能直接套用 Vite 的配置方式；关键在于避开 vite-plugin-windicss，改用官方支持的 vue-cli-plugin-windicss，否则会因构建链不匹配导致样式不生效或热更新失效。
vue add windicss 能否直接运行
能，但需确认两点：Node.js 版本 ≥ 14.18，且项目是通过 vue create 创建的标准 vue-cli 项目（含 vue.config.js 或 package.json 中有 "vue": "^2.6" 或 "vue": "^3"）。
- 执行
vue add windicss后，插件会自动：- 安装
vue-cli-plugin-windicss和windicss - 在
main.js插入import 'windi.css' - 生成
windi.config.js（若不存在）
- 安装
- 常见失败现象：
vue : 无法加载文件 ... vue.ps1—— 这是 PowerShell 执行策略限制，运行Set-ExecutionPolicy RemoteSigned -Scope CurrentUser即可解决 - 若项目已手动引入了
normalize.css或reset.css，建议在windi.config.js中设preflight: false，避免样式冲突
如何禁用预设样式并保留自定义 reset
Windi CSS 默认启用 preflight（类似 Tailwind 的基础重置），它会覆盖部分全局样式（如 body 的 margin、button 的默认边框）。旧项目往往依赖原有 reset 行为，直接开启会导致布局错乱。
- 在
windi.config.js中显式关闭：preflight: false - 若仍需部分基础重置，可单独引入轻量 reset：
import 'modern-normalize'或自定义@layer base规则 - 注意：关闭
preflight后，text-sm、font-sans等字体/尺寸类仍可用，只是不注入全局基础样式
class 名写法与 @apply 在 .vue 文件中的兼容性
Vue 2 单文件组件中，@apply 需配合 PostCSS 插件才能工作，而 vue-cli-plugin-windicss 默认不启用 PostCSS 的 @apply 支持 —— 直接写工具类更稳妥。
- ✅ 推荐写法：
<button class="px-4 py-2 bg-blue-500 text-white rounded">提交</button> - ❌ 不要依赖
@apply：<style scoped>.btn { @apply px-4 py-2 bg-blue-500; }</style>在 Vue 2 + cli 下大概率报错或无效 - 若坚持用
@apply，需额外配置 PostCSS：安装postcss-import和postcss-preset-env，并在postcss.config.js中启用postcss-apply—— 但维护成本高，不建议旧项目折腾 - 注意：
scoped样式下，工具类选择器（如.px-4）不受作用域影响，它们是全局生效的
开发时样式热更新失效或 class 不识别
这是旧项目最常见的卡点：Windi CSS 没有扫描到你写的 class 字符串，导致对应 CSS 规则未生成。
- 根本原因：vue-cli 的 webpack 构建不会静态分析模板字符串，
v-html、动态拼接:class、或字符串模板（如`bg-${color}-500`）均无法被 Windi CSS 提前识别 - 解法一（推荐）：把动态 class 提前声明为静态组合，例如：
<div :class="[baseClass, colorClass]"></div>，其中baseClass = 'px-3 py-1'、colorClass = 'bg-red-500' - 解法二：在
windi.config.js的extract选项中手动添加扫描路径，例如：extract: ['src/**/*.{vue,js,ts}']，但对运行时拼接仍无效 - 检查是否误删了
main.js中的import 'windi.css'—— 这行缺失会导致所有工具类失效，且控制台无明显报错
旧项目迁移最易被忽略的是构建阶段的 class 扫描边界：Windi CSS 不会解析运行时生成的 class 名，它只认源码里明确写出的字符串。哪怕只差一个引号或少个空格，都可能让整套原子类失效。动手前先 grep 一遍现有模板，确认 class 值全是静态字面量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
