$3

> MPX, 一款具有优秀开发体验和深度性能优化的增强型跨端小程序框架。

由于 MPX 框架为典型的以 Webpack 为构建工具的增强型小程序开发框架，所以本次安装示范将 MPX 项目作为典型案例来演示如何为大部分 Webpack 类小程序项目进行插件安装。以下安装步骤在 Webpack 项目中具有广泛的通用性，对于大部分 Webpack 类小程序项目只需参考相同步骤进行安装即可。

#### 安装 windicss-webpack-plugin

``sh
npm i windicss-webpack-plugin -D
`

>

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

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

#### 更新 webpack 配置文件

使用 Webpack 插件

`javascript
//webpack.base.conf.js
const WindiCSSWebpackPlugin = require("windicss-webpack-plugin");
const MiniProgramTailwindWebpackPlugin = require("@dcasia/mini-program-tailwind-webpack-plugin")

module.exports = {
plugins: [
new WindiCSSWebpackPlugin(),
new MiniProgramTailwindWebpackPlugin({
// options
})
]
}
`

#### 新建 Windi CSS 配置文件

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

`javascript
//windi.config.js
export default {
preflight: false,
prefixer: false,
extract: {
// 将 .mpx 文件纳入范围（其余 Webpack 类小程序根据项目本身的文件后缀酌情设置）
include: ['src/*/.{css,html,mpx}'],
// 忽略部分文件夹
exclude: ['node_modules', '.git', 'dist']
},
corePlugins: {
// 禁用掉在小程序环境中不可能用到的 plugins
container: false
}
}
`

> 此处 Tailwind CSS 配置文件同样适用
>

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

`html
// app.mpx

`

> 对于其余非 MPX 项目的 Webpack 类小程序，可参考类似的方式在入口文件中引入 windi.css 即可，如：
> `javascript
> // main.js
> import 'windi.css'
> `
>

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

#### 可配置参数

| 名称 | 类型 | 默认 | 描述 |
| ----------- | ------- | ------ | ------------------------------- |
| enableRpx | Boolean | true | 是否开启自动转换至 rpx 单位值的功能 |
| designWidth | Number | 350 | 设计稿的像素宽度值，该尺寸会影响 rpx 转换过程中的计算比率 |
| utilitiesSettings.spaceBetweenItems | Array | [] | 使用了 Space Between utilities 的容器中的子组件的名称。默认已包含 view, button, text, image 四个常用组件，所以大部分情况下开发者不需要配置该项。如需新增则可以在数组中添加新的组件名称。 |
| utilitiesSettings.divideItems | Array | [] | 使用了 Divide width utilities 的容器中的子组件的名称。默认已包含 view, button, text, image 四个常用组件，所以大部分情况下开发者不需要配置该项。如需新增则可以在数组中添加新的组件名称。 |

#### 案例
> 集成案例：MPX 项目



$3

> Taro, 多端统一开发解决方案

本插件包含 Taro 插件，通过“一键安装”的方式来便捷的适配 Taro 小程序。

> Taro 插件已兼容以下前端框架
> - React
> - Vue 2
> - Vue 3
> - Preact
>
> 同时也兼容在混合原生组件开发中使用 Tailwind/Windi CSS

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

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

#### 使用 Taro 插件

`javascript
// config/index.js
const config = {
plugins: [
['@dcasia/mini-program-tailwind-webpack-plugin/dist/taro', {
// ...options
}]
]
}
`

#### 新建 Windi CSS 配置文件

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

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

> 此处 Tailwind CSS 配置文件同样适用
>

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

`javascript
// app.js
import 'windi.css';
`

#### 完成

开始享受在 Taro 中由 Windi CSS 带来的高效开发体验 🎉

#### 可配置参数

| 名称 | 类型 | 默认 | 描述 |
| ------------------ | ------- | ------------ | ---------------------------------------- |
| enableWindiCSS | Boolean | true | 是否开启插件自带的 Windi CSS |
| windiCSSConfigFile | String | 读取项目根目录的配置文件 | 必要时手动设置 Windi CSS 配置文件的路径 |
| enableRpx | Boolean | false | 是否开启自动转换至 rpx 单位值的功能（由于 Taro 自带该功能，默认关闭） |
| designWidth | Number | 375 | 设计稿的像素宽度值，该尺寸会影响 rpx 转换过程中的计算比率 |
| utilitiesSettings.spaceBetweenItems | Array | [] | 使用了 Space Between utilities 的容器中的子组件的名称。默认已包含 view, button, text, image 四个常用组件，所以大部分情况下开发者不需要配置该项。如需新增则可以在数组中添加新的组件名称。 |
| utilitiesSettings.divideItems | Array | [] | 使用了 Divide width utilities 的容器中的子组件的名称。默认已包含 view, button, text, image 四个常用组件，所以大部分情况下开发者不需要配置该项。如需新增则可以在数组中添加新的组件名称。 |
| utilitiesSettings.customComponents | Array | [] | 对于使用 Uno CSS 作为 Atomic CSS 引擎的开发者需要根据项目情况配置。默认已包含所有小程序自带的组件名称，所以大部分情况下开发者不需要配置该项。如需新增则可以在数组中添加新的组件名称。 |
| enableDebugLog | Boolean | false | 是否开启打印本插件的内部运行日志 |

#### 案例

> - 集成案例：Taro - React 项目
> - 集成案例：Taro - Vue 2 项目
> - 集成案例：Taro - Vue 3 项目

$3

> uni-app, 开发一次，多端覆盖。

本篇内容包含 uni-app 的 Vue 3 与 Vue 2 两种安装示范。

$3

> 请参考下一个小程序类型：常规 Vite 类小程序（以 uni-app 为例）

$3

#### 安装 windicss-webpack-plugin

`sh
npm i windicss-webpack-plugin -D
`

>

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

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

#### 新建 Vue 配置文件

在项目根目录新建 vue.config.js 配置文件并使用 Webpack 插件

`javascript
// vue.config.js
const WindiCSSWebpackPlugin = require("windicss-webpack-plugin");
const MiniProgramTailwindWebpackPlugin = require("@dcasia/mini-program-tailwind-webpack-plugin")

module.exports = {
configureWebpack: {
plugins: [
new WindiCSSWebpackPlugin(),
new MiniProgramTailwindWebpackPlugin({
// options
})
]
}
}
`

#### 新建 Windi CSS 配置文件

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

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

> 此处 Tailwind CSS 配置文件同样适用
>

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

`javascript
// main.js
import 'windi.css'
`

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

#### 可配置参数

| 名称 | 类型 | 默认 | 描述 |
| ----------- | ------- | ------ | ------------------------------- |
| enableRpx | Boolean | true | 是否开启自动转换至 rpx 单位值的功能 |
| designWidth | Number | 350 | 设计稿的像素宽度值，该尺寸会影响 rpx 转换过程中的计算比率 |
| utilitiesSettings.spaceBetweenItems | Array | [] | 使用了 Space Between utilities 的容器中的子组件的名称。默认已包含 view, button, text, image 四个常用组件，所以大部分情况下开发者不需要配置该项。如需新增则可以在数组中添加新的组件名称。 |
| utilitiesSettings.divideItems | Array | [] | 使用了 Divide width utilities 的容器中的子组件的名称。默认已包含 view, button, text, image 四个常用组件，所以大部分情况下开发者不需要配置该项。如需新增则可以在数组中添加新的组件名称。 |
| utilitiesSettings.customComponents | Array | [] | 对于使用 Uno CSS 作为 Atomic CSS 引擎的开发者需要根据项目情况配置。默认已包含所有小程序自带的组件名称，所以大部分情况下开发者不需要配置该项。如需新增则可以在数组中添加新的组件名称。 |

#### 案例
> 集成案例：uni-app Vue 2 项目



$3

> uni-app, 开发一次，多端覆盖。

由于在 uni-app 中使用 Vue 3 进行小程序开发时项目是基于 Vite 进行构建的，所以本次安装示范将 uni-app Vue 3 项目作为典型案例来演示如何为大部分 Vite 类小程序项目进行插件安装。以下安装步骤在 Vite 项目中具有广泛的通用性，对于大部分 Vite 类小程序项目只需参考相同步骤进行安装即可。

#### 安装 vite-plugin-windicss 与 windicss

`sh
npm i vite-plugin-windicss windicss -D
`

>

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

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

#### 更新 Vite 配置文件

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

`javascript
// 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 配置文件

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

> 此处 Tailwind CSS 配置文件同样适用
>

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

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

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

#### 可配置参数

| 名称 | 类型 | 默认 | 描述 |
| ----------- | ------- | ------ | ------------------------------- |
| enableRpx | Boolean | true | 是否开启自动转换至 rpx 单位值的功能 |
| designWidth | Number | 350 | 设计稿的像素宽度值，该尺寸会影响 rpx 转换过程中的计算比率 |
| utilitiesSettings.spaceBetweenItems | Array | [] | 使用了 Space Between utilities 的容器中的子组件的名称。默认已包含 view, button, text, image 四个常用组件，所以大部分情况下开发者不需要配置该项。如需新增则可以在数组中添加新的组件名称。 |
| utilitiesSettings.divideItems | Array | [] | 使用了 Divide width utilities 的容器中的子组件的名称。默认已包含 view, button, text, image 四个常用组件，所以大部分情况下开发者不需要配置该项。如需新增则可以在数组中添加新的组件名称。 |
| utilitiesSettings.customComponents | Array | [] | 对于使用 Uno CSS 作为 Atomic CSS 引擎的开发者需要根据项目情况配置。默认已包含所有小程序自带的组件名称，所以大部分情况下开发者不需要配置该项。如需新增则可以在数组中添加新的组件名称。 |

#### 案例
> 集成案例：uni-app Vue 3 项目



$3

我们将本插件的核心功能解耦并打包进了 universal-handler.js 文件中，若你想在自定义的构建工具中集成本插件的核心功能，可以在工作流逻辑中引入 universal-handler：

`javascript
const { handleTemplate, handleStyle } = require('@dcasia/mini-program-tailwind-webpack-plugin/universal-handler')
`

处理 template:
`javascript
const rawContent = ''
const handledTemplate = handleTemplate(rawContent)
`

处理 style:
`javascript
const rawContent = '.h-\\[0\\.5px\\] {height: 0.5px;}'
const handledStyle = handleStyle(rawContent, options)
`

此后你便可以将处理过的字符串返回至工作流原本的流程中来生成最终的文件。

>

#### 可配置参数

| 名称 | 类型 | 默认 | 描述 |
| ----------- | ------- | ------ | ------------------------------- |
| enableRpx | Boolean | false | 是否开启自动转换至 rpx 单位值的功能 |
| designWidth | Number | 350 | 设计稿的像素宽度值，该尺寸会影响 rpx 转换过程中的计算比率 |
| utilitiesSettings.spaceBetweenItems | Array | [] | 使用了 Space Between utilities 的容器中的子组件的名称。默认已包含 view, button, text, image 四个常用组件，所以大部分情况下开发者不需要配置该项。如需新增则可以在数组中添加新的组件名称。 |
| utilitiesSettings.divideItems | Array | [] | 使用了 Divide width utilities 的容器中的子组件的名称。默认已包含 view, button, text, image 四个常用组件，所以大部分情况下开发者不需要配置该项。如需新增则可以在数组中添加新的组件名称。 |
| utilitiesSettings.customComponents | Array | [] | 对于使用 Uno CSS 作为 Atomic CSS 引擎的开发者需要根据项目情况配置。默认已包含所有小程序自带的组件名称，所以大部分情况下开发者不需要配置该项。如需新增则可以在数组中添加新的组件名称。 |


#### 案例

> 集成案例：基于 Gulp 进行自定义实现