2. 安装这个插件并运行
安装插件
在项目目录下,执行:
- npm
- yarn
- pnpm
npm i -D weapp-tailwindcss weapp-vite
yarn add -D weapp-tailwindcss weapp-vite
pnpm i -D weapp-tailwindcss weapp-vite
这样 weapp-tailwindcss
和 weapp-vite
就被安装在你的本地了
执行初始化命令
在命令行中运行
npx weapp-vite init
对现有的原生小程序项目,进行 weapp-vite
的初始化
执行后,会发现主要有许多文件改动,CLI
主要做了 3
件事情:
- 创建
vite.config.ts
文件,这个是weapp-vite
和vite
的配置文件 - 修改
package.json
, 添加dev
和build
开发和构建脚本,还有构建npm
和打开微信开发者工具 - 修改
project.config.json
内容,来适配构建产物 - 添加适配 vite 的
dts
和tsconfig.json
注册插件
给 package.json
添加下列脚本:
package.json
{
"scripts": {
"postinstall": "weapp-tw patch"
}
}
然后在你的 vite.config.ts
里对插件进行注册:
vite.config.ts
import { defineConfig } from 'weapp-vite/config'
import { UnifiedViteWeappTailwindcssPlugin as uvwt } from 'weapp-tailwindcss/vite'
export default defineConfig({
plugins: [
uvwt({
rem2rpx: true,
}),
],
})
开始运行
使用 npm run dev
进入开发模式, 此模式带有热更新的,主要用于开发
使用 npm run build
进行构建
不论是 npm run dev
还是 npm run build
, 他们的构建产物,都在工程目录下的 dist
目录
使用微信开发者工具,直接导入工程目录,然后即可预览效果!
注意不是导入
dist
目录,是你工程的根目录! 通常是dist
的父级目录,不要搞错了!
配置好的模板
假如你配置不成功,你可以参考以下模板进行配置文件对比:
想了解更多 weapp-vite
更多场景和配置,请查看 weapp-vite 文档网站