安装

安装依赖

pnpmyarnnpm

bash

pnpm add ano-ui
pnpm add -D unocss @iconify-json/tabler unocss-applet

pnpm add ano-ui
pnpm add -D unocss @iconify-json/tabler unocss-applet

bash

yarn add ano-ui
yarn add -D unocss @iconify-json/tabler unocss-applet

yarn add ano-ui
yarn add -D unocss @iconify-json/tabler unocss-applet

bash

npm install ano-ui
npm install -D unocss @iconify-json/tabler unocss-applet

npm install ano-ui
npm install -D unocss @iconify-json/tabler unocss-applet

配置 UnoCSS Applet

参考 UnoCSS 的安装文档，配置 uno.config.ts 文件。

由于小程序不支持一些 CSS 语法，需要使用 unocss-applet 插件来转换。

Details

// uno.config.ts
import type { Preset, SourceCodeTransformer } from 'unocss'
import { defineConfig } from 'unocss'

import { presetApplet, presetRemRpx, transformerApplet, transformerAttributify, } from 'unocss-applet'

const isApplet = process.env?.UNI_PLATFORM?.startsWith('mp-') ?? false

const presets: Preset[] = []
const transformers: SourceCodeTransformer[] = []

if (isApplet) {
  presets.push(presetApplet())
  presets.push(presetRemRpx())
  transformers.push(transformerAttributify({ ignoreAttributes: ['block'] }))
  transformers.push(transformerApplet())
}
else {
  presets.push(presetApplet())
  presets.push(presetAttributify())
  presets.push(presetRemRpx({ mode: 'rpx2rem' }))
}

export default defineConfig({
  presets: [
    // ...
    ...presets,
  ],
  transformers: [
    // ...
    ...transformers,
  ],
})

// uno.config.ts
import type { Preset, SourceCodeTransformer } from 'unocss'
import { defineConfig } from 'unocss'

import { presetApplet, presetRemRpx, transformerApplet, transformerAttributify, } from 'unocss-applet'

const isApplet = process.env?.UNI_PLATFORM?.startsWith('mp-') ?? false

const presets: Preset[] = []
const transformers: SourceCodeTransformer[] = []

if (isApplet) {
  presets.push(presetApplet())
  presets.push(presetRemRpx())
  transformers.push(transformerAttributify({ ignoreAttributes: ['block'] }))
  transformers.push(transformerApplet())
}
else {
  presets.push(presetApplet())
  presets.push(presetAttributify())
  presets.push(presetRemRpx({ mode: 'rpx2rem' }))
}

export default defineConfig({
  presets: [
    // ...
    ...presets,
  ],
  transformers: [
    // ...
    ...transformers,
  ],
})

配置 Ano UI

更新配置文件 uno.config.ts，内容如下：

// uno.config.ts
import { defineConfig, presetIcons } from 'unocss'
import { presetAno } from 'ano-ui'

export default defineConfig({
  presets: [
    // ...
    presetAno(),
    presetIcons({
      scale: 1.2,
      warn: true,
      extraProperties: {
        'display': 'inline-block',
        'vertical-align': 'middle',
      },
    }),
  ],
})

// uno.config.ts
import { defineConfig, presetIcons } from 'unocss'
import { presetAno } from 'ano-ui'

export default defineConfig({
  presets: [
    // ...
    presetAno(),
    presetIcons({
      scale: 1.2,
      warn: true,
      extraProperties: {
        'display': 'inline-block',
        'vertical-align': 'middle',
      },
    }),
  ],
})

按需导入

像下面这样更新 pages.json 文件：

json

// pages.json
{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^A(.*)": "ano-ui/components/A$1/A$1.vue"
    }
  }
}

// pages.json
{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^A(.*)": "ano-ui/components/A$1/A$1.vue"
    }
  }
}

或者使用 @uni-helper/vite-plugin-uni-components 自动导入组件。

// vite.config.ts
import { defineConfig } from 'vite'
import Components from '@uni-helper/vite-plugin-uni-components'
import { AnoResolver } from 'ano-ui'

// https://vitejs.dev/config/
export default defineConfig({
  // ...
  plugins: [
    // ...
    Components({
      resolvers: [AnoResolver()],
    }),
  ],
})

// vite.config.ts
import { defineConfig } from 'vite'
import Components from '@uni-helper/vite-plugin-uni-components'
import { AnoResolver } from 'ano-ui'

// https://vitejs.dev/config/
export default defineConfig({
  // ...
  plugins: [
    // ...
    Components({
      resolvers: [AnoResolver()],
    }),
  ],
})

现在只需使用一个组件，它将按需自动导入。

html

<template>
  <AButton>Button</AButton>
</template>

<template>
  <AButton>Button</AButton>
</template>

安装 ​

安装依赖 ​

配置 UnoCSS Applet ​

配置 Ano UI ​

按需导入 ​

安装

安装依赖

配置 UnoCSS Applet

配置 Ano UI

按需导入