windicss的使用

第一步：yarn add -D vue-cli-plugin-windicss
vue3:npm i -D vite-plugin-windicss windicss

第二步：

//vue.config.js
 
module.exports = {
  pluginOptions: {
    windicss: {
      // 具体配置请查看 https://github.com/windicss/vite-plugin-windicss/blob/main/packages/plugin-utils/src/options.ts
    },
  },
}

vue3:

vite.config.js
import WindiCSS from 'vite-plugin-windicss'
 
export default {
  plugins: [
    WindiCSS(),
  ],
}

第三步：

//main.js
 
import 'windi.css'

//vue3
// main.ts
import 'virtual:windi.css'

第四步，如何使用：

  
  

    

      
Erin Lindford
      
产品经理
    
    
      消息
    
  

第五步：
在vscode编辑器中可以通过安装Windi CSS Intellisense插件，来提高 Windi 的开发体验，例如：自动补全、语法高亮、代码折叠和构建。

---