项目创建

根据uni-app官网提供的 cli 构建流程使用 npm 命令创建 tip: 当前node版本使用的是node 18

$ npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project
# my-vue3-project 是项目名称，可自行修改

此刻的项目没有依赖，因此，需要依赖添加，顺手走一下 npm i

$ cd 项目名称(这里我使用的是my-blog-uni)
$ npm i
# npm install 的省略写法

eslint 和 ptrtter 相关配置

默认的 vite + ts 的项目是不带 eslint 的，需要手动安装

eslint 安装

eslint 的安装很简单，只需 npm 命令即可

$ npm i eslint -D

eslint 配置

安装完成 eslint 之后，便可通过 npx 或者 npm 命令进行 eslint 配置
使用命令

# npx 命令
$ npx eslint --init
# 或者 npm 命令
$ npm init @eslint/config

1. 配置第一步 eslint的作用

2. 配置第二步选择使用的模块类型

vite 本身不知道啥叫 require 所以使用啥选项不言而喻

3. 配置第三步选择项目框架

这里不做描述，uni-app 目前暂无 react 版本

4. 配置第四步是否使用 `typrscript`

5. 配置第五步项目会运行在哪里

此时都选上，问题不大按空格选择、可多选

6. 配置第六步使用那种风格

这里第二个选项是跳转页面看看问题，何必呢
选项一，使用流行风格
选项二，回答关于风格问题

7. 配置7 选择跟随的风格

选择选项一就行，后面能修改

8. 配置8 选择配置文件类型

出于个人习惯，我选择yml文件(js的配置文件网上有许多现成的配置，可直接参考，不熟悉yml的可考虑其他配置文件)
效果都是一样的

9. 可能出现的配置

这里我的配置过于高了，提示是否降级(当然降了呀)

最后一步是否现在下载所需的一些附加依赖

当然是啦，不然等会还要使用 npm i 下载依赖，何必呢

后续

选择立即下载，会询问通过什么包管理器下载，这边我使用的是 npm 当然，你有其他包管理工具也可以使用，没影响

此时 eslint 相关基础配置已经完成

prettier 安装及配置

prettier 安装

同样，npm 命令既可安装

$ npm i eslint-config-prettier eslint-plugin-prettier prettier -D

prettier 配置

根目录新建一个名为 .prettierrc.cjs
这时只需要添加 prettier 配置即可这里我给出我自己的配置。看着差不多修改即可

// .prettierrc.cjs
module.exports = {  
    printWidth: 80, // 一行最多80个字符  
    tabWidth: 2, // 设置工具每一个水平缩进的空格数  
    useTabs: false,//不使用缩进,而使用空格  
    semi: false, // 句末是否加分号  
    vueIndentScriptAndStyle: false,//Vue文件中＜script＞和＜style＞是否缩进  
    singleQuote: true, // 用单引号  
    trailingComma: 'none', // 最后一个对象元素符加逗号  
    bracketSpacing: true,// 箭头函数,只有一个参数的时候,也需要括号  
    arrowParens: 'always', // 不需要写文件开头的 @prettier  
    insertPragma: false, // 不需要自动在文件开头加入 @prettier  
    endOfLine: 'auto' // 换行符使用 auto 有些地方说的是推荐使用lf  
}

eslint 和 prettier 会有冲突，此时，需要修改

env:  
    browser: true  
    es2021: true  
    node: true  
extends:  
    - plugin:vue/vue3-essential  
    - eslint:recommended  
    - plugin:@typescript-eslint/recommended  
    - plugin:prettier/recommended  
overrides:  
    - files:  
        - '*.ts'  
        - '*.tsx'  
        - '*.vue'  
parser: vue-eslint-parser  
parserOptions:  
    ecmaVersion: latest  
    sourceType: module  
parser: '@typescript-eslint/parser'  
plugins:  
    - vue  
    - '@typescript-eslint'  
globals: {  
    uni: 'writable'  
}  
rules: {  
    'vue/multi-word-component-names': 'off',  
    'prettier/prettier': 2,  
    quotes: ['error', 'single'],  
    eqeqeq: 'error',  
    curly: 'error',  
    semi: 0  
}

tailwindcss

tailwindcss安装

同样，npm 命令直接搞定

$ npm i -D tailwindcss postcss autoprefixer

tailwindcss 配置

tailwindcss 初始化

使用 npx 命令，初始化 tailwindcss

$ npx tailwindcss init -p

此时，应该出现提示

Created Tailwind CSS config file: tailwind.config.js
Created PostCSS config file: postcss.config.js

并且，项目中多出了两个文件，一个是 tailwind.config.js 一个是 postcss.config.js

后续步骤一: 修改 `tailwind.config.js`

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx,vue}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

后续步骤二: 添加 tailwindcss 至全局

App.vue就是全局的，因此，只需要添加进去即可(切记，style标签中不要加scoped)

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

后续步骤三: 修改 `vite.config.ts`

// vite.config.ts
import { defineConfig } from 'vite'
import tailwindcss from 'tailwindcss'
import uni from '@dcloudio/vite-plugin-uni'

export default defineConfig({
  plugins: [uni()],
  css: {
    postcss: {
      plugins: [
        tailwindcss(),
      ],
    },
  },
})

后续步骤四: 小程序适配

其实到这一步，tailwindcss 已经可以正常使用了，只不过小程序不支持 tailwindcss 的通配符，会抛出错误因此，如需运行至小程序时，需要适配小程序
通过 npm 命令，添加 @uni-helper/vite-plugin-uni-tailwind 插件，协助 tailwindcss 编译在小程序中

安装

$ npm i @uni-helper/vite-plugin-uni-tailwind

配置

配置 @uni-helper/vite-plugin-uni-tailwind 只需修改 vite.config.ts即可

// vite.config.ts
import { defineConfig } from 'vite'
import tailwindcss from 'tailwindcss'
import uni from '@dcloudio/vite-plugin-uni'
// 这里是新增的
import uniTailwind from '@uni-helper/vite-plugin-uni-tailwind'

export default defineConfig({
  // 这里也有改动
  plugins: [uni(), uniTailwind()],
  css: {
    postcss: {
      plugins: [
        tailwindcss(),
      ],
    },
  },
})

至此 tailwindcss 已经全部配置完成，接下来就可以尽情的使用了

可参考配置: rem to rpx

tailiwindcss 默认的尺寸是按照 rem 计算的可将 rem 转换成 rpx
通过 tailwindcss-rem2px-preset 插件，可以进行单位转换

安装

$ npm i tailwindcss-rem2px-preset -D

配置

配置方面，只需调整tailwindcss.config.js即可

//tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx,vue}'],
  theme: {
    extend: {},
  },
  plugins: [],
  presets: [
    require('tailwindcss-rem2px-preset').createPreset({
      // 32 就是 1rem = 32rpx
      fontSize: 32,
      // 转化的单位,可以转换变成 px / rpx
      unit: 'rpx'
    })
  ],
}

走到这里，所有可配置步骤均已完成，接下来，可以开开心心的使用 tailwindcss 了

uni-app + vite + tailwindcss + eslint + prettier