家教响应式网站,物联网设计竞赛,衡水市住房和城乡规划建设网站,垂直网站建设方案书1、先创建vue项目
利用脚手架vue-cli创建#xff0c;根据需求设置vue版本、babel等#xff0c;无特别要求直接用默认的vue2或vue3就行
vue create 项目名
2、运行vue项目#xff0c;利用vue-cli安装Windi CSS
官网指导#xff1a;Vue CLI 集成 | Windi CSS
我的经历根据需求设置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-colorbg-颜色单词-数字数字代表颜色的饱和度和亮度数字一定要写不然无色见颜色 | Windi CSS
texttext-颜色可以不写数字
自定义颜色
如果项目里没有windi.config.js文件就新增一个在windi.config.js里配置
import colors from windicss/colorsexport default {theme: {extend: {colors: {lalablue: colors.blue, // 颜色新名字colors里的颜色名字},},},
}使用
原始bg-blue-500
改名后bg-lalablue-500
