本文主要是介绍使用Windi CSS(基于vue-cli),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
1、先创建vue项目
利用脚手架vue-cli创建,根据需求设置vue版本、babel等,无特别要求直接用默认的vue2或vue3就行
vue create 项目名
2、运行vue项目,利用vue-cli安装Windi CSS
官网指导:Vue CLI 集成 | Windi CSS
我的经历:直接终端输入以下命令即可自动安装,且在main.js文件会自动引入,也无需在vue.config.js中配置了才能使用,有特别定制的可以配置,不需要特别定制的可以不配置
vue add windicss
【注意】这一步可能会报错:vue : 无法加载文件......,解决方法看:vue : 无法加载文件 F:\nodejs\vue.ps1,因为在此系统上禁止运行脚本。_vue无法加载文件-CSDN博客
VS code插件:WindiCSS IntelliSense,可以辅助自己使用
3、工具类
3.1、颜色
背景色(background-color):bg-颜色单词-数字(数字代表颜色的饱和度和亮度,数字一定要写,不然无色,见颜色 | Windi CSS)
text:text-颜色:可以不写数字
自定义颜色:
如果项目里没有windi.config.js文件就新增一个,在windi.config.js里配置:
import colors from 'windicss/colors'export default {theme: {extend: {colors: {lalablue: colors.blue, // 颜色新名字:colors里的颜色名字},},},
}使用:
原始:bg-blue-500
改名后:bg-lalablue-500
这篇关于使用Windi CSS(基于vue-cli)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!