1.创建项目
创建项目时使用cli工具创建，不要使用hbuilder工具创建。
1.0 全局安装
|
|
npm install -g @vue/cli@4 |
1.1 创建项目
|
|
-- 使用命令行创建 npx degit dcloudio/uni-preset-vue#vite my-vue3-project |
或者直接下载模板代码
gitee (opens new window)
2项目配置
2.1安装tailwindcss依赖
|
|
npm install tailwindcss@latest postcss@latest autoprefixer@latest |
2.2添加tailwind.config.js文件，文件内容如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
module.exports = { content: [ './src/pages/**/*.{vue,js}', ], darkMode: 'media', // or 'media' or 'class' theme: { }, variants: { extend: {}, }, plugins: [ ], corePlugins: { // 禁用一些小程序不支持的Class space: false, divideWidth:false, divideColor: false, divideStyle: false, divideOpacity:false } } |
2.3 修改vite.config.js文件，添加postcss相关配置
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
import { ViteWeappTailwindcssPlugin as vwt, postcssWeappTailwindcssRename, } from "weapp-tailwindcss-webpack-plugin"; const isH5 = process.env.UNI_PLATFORM === "h5"; const postcssPlugins = [require("autoprefixer")(), require("tailwindcss")()]; if (!isH5) { postcssPlugins.push( require("postcss-rem-to-responsive-pixel")({ rootValue: 32, propList: ["*"], transformUnit: "rpx", }) ); postcssPlugins.push(postcssWeappTailwindcssRename()); } // https://vitejs.dev/config/ export default defineConfig({ plugins: [ uni(),isH5 ? undefined : vwt() ], resolve: { alias: { '/@': path.resolve('./src'), '@/': path.resolve('./src') } }, css:{ postcss:{ plugins:postcssPlugins } }, // 省略其他配置内容 }) |
上面的配置需要安装两个依赖文件：
|
|
yarn add -D weapp-tailwindcss-webpack-plugin yarn add -D postcss-rem-to-responsive-pixel |
添加tailwind.css文件
在/src/style目录下新建一个tailwind.css文件，添加如下内容：
|
|
@tailwind base; @tailwind components; @tailwind utilities; |
引入tailwind.css文件
在main.js文件当中引入上面添加的css文件，如下：
|
|
import { createSSRApp } from "vue"; import App from "./App.vue"; import "@/style/tailwind.css" export function createApp() { const app = createSSRApp(App); return { app, }; } |
不出意外，重新运行项目后就会生效。
