uniapp使用vite，vue3，tailwind的搭建教程

牛铁柱

我习惯使用vscode，所以这个教程没有使用HBuilderX，而是通过 vue-cli 创建 uni-app 项目

环境安装

全局安装 vue-cli

npm install -g @vue/cli

创建项目

使用Vue3/Vite版

创建以 javascript 开发的工程（如命令行创建失败，请直接访问 gitee 下载模板）

    npx degit dcloudio/uni-preset-vue#vite my-vue3-project

创建以 typescript 开发的工程（如命令行创建失败，请直接访问 gitee 下载模板）

    npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

执行 npm i 或者 yarn
如果发现报错，排查下错误，我运行npm的时候报错，最后发现@dcloudio/vite-plugin-uni这个依赖要求vite是4.0.3，但是我安装的是4.0.4，所以在package.json将vite改为4.0.3。具体的错误具体排查。

如果看不懂错误，可以将完整的错误信息，发给chatgpt，它会告诉你错误解决办法。

预览项目

我们在package.json中可以看到所有的命令，比如以下

    "dev:app": "uni -p app",
    "dev:app-android": "uni -p app-android",
    "dev:app-ios": "uni -p app-ios",
    "dev:custom": "uni -p",
    "dev:h5": "uni",
    "dev:h5:ssr": "uni --ssr",
    "dev:mp-alipay": "uni -p mp-alipay",
    "dev:mp-baidu": "uni -p mp-baidu",
    "dev:mp-kuaishou": "uni -p mp-kuaishou",
    "dev:mp-lark": "uni -p mp-lark",
    "dev:mp-qq": "uni -p mp-qq",
    "dev:mp-toutiao": "uni -p mp-toutiao",
    "dev:mp-weixin": "uni -p mp-weixin",
    "dev:quickapp-webview": "uni -p quickapp-webview",
    "dev:quickapp-webview-huawei": "uni -p quickapp-webview-huawei",
    "dev:quickapp-webview-union": "uni -p quickapp-webview-union",
    "build:app": "uni build -p app",
    "build:app-android": "uni build -p app-android",
    "build:app-ios": "uni build -p app-ios",
    "build:custom": "uni build -p",
    "build:h5": "uni build",
    "build:h5:ssr": "uni build --ssr",
    "build:mp-alipay": "uni build -p mp-alipay",
    "build:mp-baidu": "uni build -p mp-baidu",
    "build:mp-kuaishou": "uni build -p mp-kuaishou",
    "build:mp-lark": "uni build -p mp-lark",
    "build:mp-qq": "uni build -p mp-qq",
    "build:mp-toutiao": "uni build -p mp-toutiao",
    "build:mp-weixin": "uni build -p mp-weixin",
    "build:quickapp-webview": "uni build -p quickapp-webview",
    "build:quickapp-webview-huawei": "uni build -p quickapp-webview-huawei",
    "build:quickapp-webview-union": "uni build -p quickapp-webview-union",
    "type-check": "vue-tsc --noEmit"

如果我们需要预览微信小程序，那么运行npm run dev:mp-weixin即可

然后我们会发现项目的根目录多了一个dist文件夹，这个是编译后的文件夹，我们打开微信开发者工具，导入项目，文件夹选择dist/dev/mp-weixin。这时候就可以看到我们的微信小程序了。

现在我们随时修改src目录下面的代码，保存后，可以实时的看到小程序的变化。无需再次编译，它会实时监听修改。

牛铁柱

支持tailwindcss

教程来自 https://github.com/dcasia/mini-program-tailwind

安装 vite-plugin-windicss 与 windicss

npm i vite-plugin-windicss windicss -D

安装 @dcasia/mini-program-tailwind-webpack-plugin

npm i @dcasia/mini-program-tailwind-webpack-plugin -D

更新 Vite 配置文件

在 vite.config.js 配置文件中使用插件

// vite.config.js
import WindiCSS from 'vite-plugin-windicss';
import MiniProgramTailwind from '@dcasia/mini-program-tailwind-webpack-plugin/rollup';

export default {
  plugins: [
    WindiCSS(),
    MiniProgramTailwind()
  ]
}

新建 Windi CSS 配置文件

在项目根目录新建 windi.config.js 配置文件

//windi.config.js
export default {
  preflight: false,
  prefixer: false,
  extract: {
    // 忽略部分文件夹
    exclude: ['node_modules', '.git', 'dist']
  },
  corePlugins: {
    // 禁用掉在小程序环境中不可能用到的 plugins
    container: false
  }
}

在入口文件中引入 Windi CSS 的产物

// main.js
import 'virtual:windi.css'

完成

开始享受在小程序项目中由 Windi CSS 带来的高效开发体验 🎉

做个示范

<template>
	<view class="index bg-[#b5b5b5] h-screen pl-7.5" :class="{'text-[50px]': true}">
        <text :class="['font-bold', 'text-[#ffffff]']">{{ title }}</text>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const title = ref('Hello world!')
</script>

<style>
    .index {
        @apply pt-[45vh];
    }
</style>

牛铁柱

本节教程作废，因为经过实践，发现新版本的vant已经不支持uniapp了。

使用UI组件

安装

这里以vant为例。其他的组件库需要根据实际情况配置。

在src目录下建立目录wxcomponents
下载 https://github.com/youzan/vant-weapp
解压后将dist目录拷贝到新建的wxcomponents目录下，并重命名dist为vant-weapp

使用

pages.json 配置

打开pages.json ,引入需要使用的组件。

{
    "pages": [
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "vant-weapp",
                 // 使用小程序组件
                "usingComponents": {
                    "van-button": "/wxcomponents/vant-weapp/button/index"
                }
            }
        }
    ]
    }

使用vant-weapp

<template>
    <view>
        <van-button type="default">默认按钮</van-button>
        <van-button type="primary">主要按钮</van-button>
        <van-button type="warning">警告按钮</van-button>
        <van-button type="danger">危险按钮</van-button>
    </view>
</template>`

Tips

vant-weapp 仅支持小程序/App ,暂不支持H5 。
小程序组件需要放在项目根目录下的wxcomponents文件夹。
注意数据和事件绑定的差异，使用时应按照vue的数据和事件绑定方式。
原事件命名以短横线分隔的需要手动修改小程序组件源码为驼峰命名，比如：this.$emit('left-click')修改为this.$emit('leftClick')
vant-weapp各组件文档请参考vant-weapp 使用文档
uni-app 小程序组件使用规范请参考 uni-app 小程序组件支持
关联阅读 vant 使用心得

牛铁柱

建议安装的vscode扩展

EditorConfig for VS Code
Prettier - Code formatter
ESLint
Vue Language Features (Volar)
WindiCSS IntelliSense
Tailwind CSS IntelliSense

牛铁柱

一些小问题处理

vue2 只允许在template下面包含1个根节点。vue3取消了这个限制。但是我们在template节点下面写多个节点的时候，发现会出现波浪线提示。鼠标放在上面，发现提示：

The template root requires exactly one element
// 只允许1个节点

解决办法：
1.修改vs code vetur扩展配置，打开搜索，输入vetur ,然后把下面的选项的去掉。

小花

楼主太厉害了！一直想在uniapp用tailwindcss不会弄🚀

本网站的服务器由提供