Compatible with uni-app

README.md

@@ -40,7 +40,7 @@
 
 <summary>⚙️ 针对以 Webpack 为构建工具的小程序</summary>
 
-### Webpack 类小程序（MPX）
+### Webpack 通用类小程序（MPX）
 
 > [MPX](https://mpxjs.cn/), 一款具有优秀开发体验和深度性能优化的增强型跨端小程序框架。
 
@@ -64,13 +64,33 @@ npm i windicss-webpack-plugin -D
 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 CSS 配置文件
+在项目根目录新建 `windi.config.js` 配置文件
 
 ```javascript
 //windi.config.js
 export default {
+  preflight: false,
   prefixer: false,
   extract: {
     // 将 .mpx 文件纳入范围（其余 Webpack 类小程序根据项目本身的文件后缀酌情设置）
@@ -92,32 +112,23 @@ export default {
 > [Windi CSS 配置文件兼容规则](https://windicss.org/guide/configuration.html)
 > </details>
 
-#### 更新 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
-    })
-  ]
-}
-```
-
-#### 在 app.mpx 中引入 Windi CSS 的产物
+#### 在入口文件中引入 Windi CSS 的产物
 
 ```html
-<style src="windi-utilities.css"></style>
+// app.mpx
+<style src="windi.css"></style>
 ```
 
-> 对于其余 Webpack 类小程序，可参考类似的方式在入口的样式文件中引入 `windi-utilities.wxss` 即可
+> 对于非 MPX 项目的其余 Webpack 类小程序，可参考类似的方式在入口文件中引入 `windi.css` 即可，如：
+> ```javascript
+> // main.js
+> import 'windi.css'
+> ``` 
+> <details>
+> <summary>参考 Windi CSS 官方文档了解更多细节</summary>
+>    
+> [引入 Windi CSS 样式文件](https://windicss.org/integrations/webpack.html#include-the-virtual-module)
+> </details>
 
 #### 完成
 开始享受在小程序项目中由 Windi CSS 带来的高效开发体验 🎉
@@ -172,7 +183,7 @@ const config = {
 
 #### 新建 Windi CSS 配置文件
 
-在项目根目录新建 Windi CSS 配置文件
+在项目根目录新建 `windi.config.js` 配置文件
 
 ```javascript
 // windi.config.js
@@ -196,10 +207,10 @@ export default {
 > [Windi CSS 配置文件兼容规则](https://windicss.org/guide/configuration.html)
 > </details>
 
-#### 在 app.js/app.ts 中引入 Windi CSS 的产物
+#### 在 app.js 中引入 Windi CSS 的产物
 
 ```javascript
-// app.js/app.ts
+// app.js
 import 'windi.css';
 ```
 
@@ -227,6 +238,112 @@ import 'windi.css';
 
 <details>
 
+<summary>🔗 针对 uni-app 小程序</summary>
+
+### uni-app 小程序
+
+> [uni-app](https://uniapp.dcloud.net.cn/), 开发一次，多端覆盖。
+
+本篇内容包含 uni-app 的 Vue 2 与 Vue 3 两种安装示范。
+
+### Vue 2
+
+#### 安装 windicss-webpack-plugin
+
+```sh
+npm i windicss-webpack-plugin -D
+```
+
+> <details>
+> <summary>参考 Windi CSS 官方文档了解更多细节</summary>
+>    
+> [Windi CSS Webpack 集成文档](https://windicss.org/integrations/webpack.html)
+> </details>
+
+#### 安装 @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: {
+    // 将 .mpx 文件纳入范围（其余 Webpack 类小程序根据项目本身的文件后缀酌情设置）
+    include: ['src/**/*.{css,html,mpx}'],
+    // 忽略部分文件夹
+    exclude: ['node_modules', '.git', 'dist']
+  },
+  corePlugins: {
+    // 禁用掉在小程序环境中不可能用到的 plugins
+    container: false
+  }
+}
+```
+
+> 此处 Tailwind CSS 配置文件同样适用
+> <details>
+> <summary>参考 Windi CSS 官方文档了解更多细节</summary>
+>    
+> [Windi CSS 配置文件兼容规则](https://windicss.org/guide/configuration.html)
+> </details>
+
+#### 在 main.js 中引入 Windi CSS 的产物
+
+```javascript
+// main.js
+import 'windi.css'
+```
+
+#### 完成
+开始享受在小程序项目中由 Windi CSS 带来的高效开发体验 🎉
+
+#### 可配置参数
+
+| **名称**      | **类型**  | **默认** | **描述**                          |
+| ----------- | ------- | ------ | ------------------------------- |
+| enableRpx   | Boolean | true   | 是否开启自动转换至 rpx 单位值的功能            |
+| designWidth | Number  | 350    | 设计稿的像素宽度值，该尺寸会影响 rpx 转换过程中的计算比率 |
+
+#### 案例
+> [集成案例：uni-app Vue 2 项目](https://github.com/dcasia/mini-program-tailwind/tree/development/examples/uni-app/vue-2)
+
+### Vue 3
+
+> 待更新...
+
+</details>
+
+<details>
+
 <summary>🛠 针对原生开发或自定义构建的小程序</summary>
 
 ### 原生开发或自定义构建工具的小程序

examples/uni-app/vue-2/.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules/
+unpackage/
+dist/
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.project
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*

examples/uni-app/vue-2/README.md

@@ -0,0 +1,19 @@
+# mp-tailwind-uniapp
+
+## Project setup
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+```
+yarn serve
+```
+
+### Compiles and minifies for production
+```
+yarn build
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

examples/uni-app/vue-2/babel.config.js

@@ -0,0 +1,63 @@
+const plugins = []
+
+if (process.env.UNI_OPT_TREESHAKINGNG) {
+  plugins.push(require('@dcloudio/vue-cli-plugin-uni-optimize/packages/babel-plugin-uni-api/index.js'))
+}
+
+if (
+  (
+    process.env.UNI_PLATFORM === 'app-plus' &&
+    process.env.UNI_USING_V8
+  ) ||
+  (
+    process.env.UNI_PLATFORM === 'h5' &&
+    process.env.UNI_H5_BROWSER === 'builtin'
+  )
+) {
+  const path = require('path')
+
+  const isWin = /^win/.test(process.platform)
+
+  const normalizePath = path => (isWin ? path.replace(/\\/g, '/') : path)
+
+  const input = normalizePath(process.env.UNI_INPUT_DIR)
+  try {
+    plugins.push([
+      require('@dcloudio/vue-cli-plugin-hbuilderx/packages/babel-plugin-console'),
+      {
+        file (file) {
+          file = normalizePath(file)
+          if (file.indexOf(input) === 0) {
+            return path.relative(input, file)
+          }
+          return false
+        }
+      }
+    ])
+  } catch (e) {}
+}
+
+process.UNI_LIBRARIES = process.UNI_LIBRARIES || ['@dcloudio/uni-ui']
+process.UNI_LIBRARIES.forEach(libraryName => {
+  plugins.push([
+    'import',
+    {
+      'libraryName': libraryName,
+      'customName': (name) => {
+        return `${libraryName}/lib/${name}/${name}`
+      }
+    }
+  ])
+})
+module.exports = {
+  presets: [
+    [
+      '@vue/app',
+      {
+        modules: 'commonjs',
+        useBuiltIns: process.env.UNI_PLATFORM === 'h5' ? 'usage' : 'entry'
+      }
+    ]
+  ],
+  plugins
+}