WindiCss在webpack+vue-cli的实践（一）安装

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

起因

起因是因为技术群里有人在聊WindiCss，于是出于好奇就去搜了一下，发现了这个奇妙的CSS框架。

本身项目里就有一个common.js，用于整个项目的快捷class，什么mt-xx，ft-xx等，代表对应的margin-top: xx； font-size: xx

但是始终是一个写死的文件，不够优雅，也不够灵活，于是在仔细的把整个文档拉通了看一遍后，决定实践这个框架

安装

由于WindiCss的可以支持的生态众多，这里以webpack+vue-cli为例，如果有需要其他的支持，可以参考中文官方文档：cn.windicss.org/guide/insta…

这里以实践为优先，精简为重点，所以过多的节点应该以官方文档为准

vue add windicss

这里先把框架加进去，加进去后在main.js里可以看到已经出现了

import 'windi.css'

这时候官方让进行一个options的配置放在 vue.config.js

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

但实际上一开始可以不加，没有影响

然后需要在根目录新建一个windi.config.js

  theme: {
    extend: {
    },
  },
  shortcuts: {
  },
};

后续需要在这里进行一个配置

注意

官方底部有个注意事项

看到这里，然后我想到element的也是以scss进行开发，所以项目也选择scss，或者体验会更好

结尾

That's it! Starting using classes utilities or CSS directives in your app

这里可以看到这个css框架，最核心的便是 classes utilities 和 CSS directives

最终都是为了有更高的效率和更好的开发体验，因此，要灵活运用这些框架，从实践去理解其存在的思想和思路，如何能从实践中去提高自己的效率，才有更多的时间和精力去做自己的事情

接下来还要继续我们的配置