uniapp-tailwindcss-uview-starter開(kāi)發(fā)模板
uniapp-tailwind-uview-starter
背景：之前用uniapp+uview開(kāi)發(fā)了一大一小兩個(gè)小程序，css方案用的原子風(fēng)格的，發(fā)現(xiàn)用的還是挺爽的，就在想能不能用上tailwindcss，研究之后發(fā)現(xiàn)用Hbuilder創(chuàng)建的自由度比較低，于是選擇了用Vue-cli4搭建了一套。
項(xiàng)目地址
uniapp-tailwind-uview-starter
項(xiàng)目初始化
在Webstorm中或者Vscode中開(kāi)發(fā)uniapp
我選擇了默認(rèn)模板。
我的Webstorm默認(rèn)使用pnpm包管理，這是第一個(gè)坑，啟動(dòng)項(xiàng)目時(shí)報(bào)錯(cuò)，于是rm -rf node_modules，重新使用yarn安裝依賴，然后npm serve正常啟動(dòng)。
第二個(gè)坑是要求Webstorm設(shè)置Nodejs v12以上，否則tailwind不會(huì)智能提示。
如果是想要啟動(dòng)微信小程序的話，選擇dev:mp-weixin，然后進(jìn)入微信開(kāi)發(fā)者工具選擇dist包
安裝tailwindcss
主要安裝如下依賴，因?yàn)橐恍〣ug，我鎖定了autoprefixer的版本為8.0.0
添加配置
添加
tailwind.config.js，配置較多，可以前往項(xiàng)目查看添加
postcss.config.js
新建styles文件夾，新增
tailwind.css，并在main.js中引入
配置
jsconfig.json，可以設(shè)置alias別名
配置
ESLint
此時(shí)已經(jīng)可以啟動(dòng)項(xiàng)目了查看效果了
安裝Uview
官方文檔
坑：
官方第2、3步：
@import "uview-ui/index.scss";改為@import "~uview-ui/index.scss";uview前面增加~第4步，我們是npm方式，npm安裝的方式無(wú)需"@/"
uview沒(méi)有代碼提示，需要新增一個(gè)uview-comp.js，全部引入注冊(cè)，不需要引入main.js，因?yàn)橹皇菫榱舜a提示。
效果
