参考 uniapp+vue3+pinia+tailwindcss+gulp 开发小程序-H5 (opens new window)
参考 英文 (opens new window)
参考 中文 (opens new window)

环境前提

全局安装 vue-cli

npm install -g @vue/cli@4

Version of node npm yarn

node 16+
npm 7+
yarn 1.22+

create uni-app for vite

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

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

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

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

yarn install

TailWind CSS

install

npm install -D tailwindcss postcss autoprefixer
yarn add -D tailwindcss postcss autoprefixer prettier-plugin-tailwindcss postcss-import

prettier-plugin-tailwindcss自动排序样式

Setting

npx tailwindcss init

其他发开依赖

yarn add -D vite-plugin-eslint
yarn add vite-plugin-eslint --dev
yarn add -D postcss-class-rename
yarn add -D css-byebye
yarn add prettier prettier-eslint prettier-eslint-cli --dev

postcss

项目目录新建postcss.config.js文件

点击查看

const { uniPostcssPlugin } = require('@dcloudio/uni-cli-shared')

module.exports = {
    plugins: [
        uniPostcssPlugin(),
        require('autoprefixer')(),
        require("tailwindcss")({ config: require("./tailwind.config") }),
        ...(
            process.env.UNI_PLATFORM !== "h5" ? [
                    // 使用postcss-class-name 包将小程序不支持的类名写法转换为支持的类名，如："hover:xxx"
                    require("postcss-class-rename")({
                        "\\\\:": "-",
                        "\\\\/": "-",
                        "\\\\.": "-",
                        ".:": "tailwind",
                        "\\\*": "tailwind",
                    })
                ] : [
                    require("autoprefixer")({
                        remove: true,
                    }),
                ]
        ),
    ]
}

gulp

在项目目录新建gulpfile.js文件,我没用这个。

点击查看

var replace = require('gulp-replace');
const gulp = require('gulp')

const updateTailwind = async () => {
    /* 找到微信小程序构建后的文件 */
    await gulp.src('./dist/dev/mp-weixin/**/**/*.wxml')
    /* 在文本中找到class拿出来做修改 */
     .pipe(replace(/class="((\w+([-]*)|([/]?)\w)|(\w+[-]['[']\w+])?(\[\/w\]\\)?\s?)+"/ig, (match, p1) => {
        let useMatch = match;
        /* 找到/替换为- */
        if (useMatch.includes("/")) {
            useMatch = useMatch.replace("/", "-")
        }
        /* 找到[x]替换为 -x- */
        if (useMatch.includes("[")) {
            useMatch = (useMatch.replace(/\[/g, "-")).replace(/\]/g, "-")
        }
        /* 返回回去 */
        return useMatch
    }))
    /* 修改后的保存地方 */
    .pipe(gulp.dest('./dist/dev/mp-weixin/'));
}


/* 默认任务 */
gulp.task('default', function (ret) {
    return updateTailwind();
});


/* 监听src下面的文件做了修改 */
gulp.watch('src/**/**').on('change', function (event) {
    console.log(event + '文件发生了改变~');
    setTimeout(updateTailwind, 1000);
});

引入样式

在app.vue里面style节点

点击查看

我没设置这个

<style>
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
</style>

import { createSSRApp } from "vue";
// import store from '@/src/store'

import App from "./App.vue";

import './tailwind.css'

export function createApp() {
  const app = createSSRApp(App);
  // app.use(store)
  return {
    app,
  };
}

自动格式化代码

eslint + prettier 自动格式化代码.

npm install eslint prettier --save-dev
yarn add -D eslint prettier

eslint配置

配置参考 (opens new window)

官网实例配置 (opens new window)

点击查看

module.exports = {
  root: true,
  env: { node: true },
  extends: [
    'plugin:vue/essential'
    //   ,'eslint:recommended'
  ],
  parserOptions: {
    ecmaFeatures: {
      // Support decorators
      legacyDecorators: true
    }
  },
  globals: {
    dayjs: 'readonly'
  },
  rules: {

  }
}

rules 详情查看

prettier配置

可以直接在 vscode setting.json中配置,建议这么做，避免不同项目都要设置一次。

  // prettier 配置
  "prettier.printWidth": 200, // prettier 宽度
  "prettier.singleQuote": true, // prettier 可以单引号
  "prettier.semi": false, // prettier 设置语句末尾不加分号
  "prettier.trailingComma": "none", // prettier 去掉最后一个逗号
  "prettier.proseWrap": "preserve", // prettier //换行方式 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
  // prettier 配置结束

也可以配置 .prettierrc.js

点击查看

module.exports = {
  printWidth: 200, //行宽
  semi: false, //分号
  singleQuote: true, // 使用单引号
  useTabs: false, //使用 tab 缩进
  tabWidth: 2, //缩进
  trailingComma: 'none', //后置逗号，多行对象、数组在最后一行增加逗号
  arrowParens: 'avoid', //箭头函数只有一个参数的时候可以忽略括号
  bracketSpacing: true, //括号内部不要出现空格
  proseWrap: 'preserve', //换行方式 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
  parser: 'babylon', //格式化的解析器，默认是babylon
  endOfLine: 'auto', // 结尾是 \n \r \n\r auto
  jsxSingleQuote: false, // 在jsx中使用单引号代替双引号
  jsxBracketSameLine: false, //在jsx中把'>' 是否单独放一行
  stylelintIntegration: false, //不让prettier使用stylelint的代码格式进行校验
  eslintIntegration: false, //不让prettier使用eslint的代码格式进行校验
  tslintIntegration: false, // 不让prettier使用tslint的代码格式进行校验
  disableLanguages: ['vue'], // 不格式化vue文件，vue文件的格式化单独设置
  htmlWhitespaceSensitivity: 'ignore',
  ignorePath: '.prettierignore', // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
  requireConfig: false, // Require a 'prettierconfig' to format prettier
  plugins: [require('prettier-plugin-tailwindcss')] // tailwind css 样式自动排序
}

报错

文件内大量报错

linebreak-style规则，声明为Windows系统即可：
规则：回车符使用windows风格（CRLF），默认是LF:使用mac风格

rules: {
    'linebreak-style': [2], // 如果一直出错，设置为 [2,'windows'] 回车符使用windows风格（CRLF），默认是LF:使用mac风格
}

vite-plugin-eslint 报错

.eslintrc.js

plugins: [
    uni(),
    eslintPlugin({
      include: ['src/**/*.js', 'src/**/*.jsx', 'src/**/*.ts', 'src/**/*.tsx', 'src/**/*.vue'],
      exclude: ['./node_modules/**'],
      cache: false
    })
  ],

插件部分

vscode 插件 Tailwind CSS IntelliSense 可以大大提高效率。

main.js

记得配置 Vuex

使用注意

在使用的时候会有默认的一些值都是rem在小程序里面也能用
但是不是那么好用
所有不建议用默认值

这里就可以完整的发挥 jit 的作用了
比如 w-80 构建后和 width:320px; 大致是一样的

所以上面使用的 gulp 就要起作用了
如果想用 width:750rpx; -> class="w-[750rpx]"
不仅是宽度、宽度、边距、填充都是这样需要加上rpx在H5会编译成rem在小程序会编译成rpx

在 Tailwind CSS 里面颜色透明度也不用那么麻烦
和 H5 里面一样的使用
比如 text-red-500/25 0.25 透明度 后面的值也不是随便填的具体看这里