### Apply UnoCSS width utility

Source: https://unibest.tech/base/4-style

Example of using UnoCSS utility class for a 100px element.

```text
w-100rpx
```

--------------------------------

### Unibest Project Configuration Files

Source: https://unibest.tech/base/1-introduction

Provides a partial view of the configuration files within a Unibest project, including Vite configuration, UnoCSS setup, TypeScript typings, and utility functions.

```tree
├── tsconfig.json
├── uno.config.ts
├── vite-plugins
│   ├── copy-native-resources.ts
│   ├── README.md
│   └── sync-manifest-plugins.ts
└── vite.config.ts
```

--------------------------------

### Example Data Object for i18n Parameters

Source: https://unibest.tech/base/10-i18n

Provide a JavaScript object containing the data to be substituted into the i18n strings. Nested objects are supported.

```js
{name:'张三',detail:{height:178,weight:'75kg'}}
```

--------------------------------

### Layout Configuration in Route Block

Source: https://unibest.tech/base/3-plugin

Specify a custom layout for a page by setting the `layout` property within its route block. The example uses the 'demo' layout.

```vue
<route lang="json5">
{
  layout: 'demo',
  style: {
    navigationBarTitleText: '关于',
  },
}
</route>
```

--------------------------------

### WeChat mini-program login error message

Source: https://unibest.tech/base/15-faq

Example of the error output encountered when attempting to access pages in tourist mode.

```text
{errMsg: "navigateTo:fail Error: INVALID_LOGIN,
access_token expired [20250103 17:08:03][touristappid]"}
```

--------------------------------

### Example i18n JSON for Parameterized String

Source: https://unibest.tech/base/10-i18n

Define the parameterized string in your language JSON file (e.g., en.json). The keys within curly braces should match the keys in your data object.

```json
{ "introduction": "I am {name},height:{detail.height},weight:{detail.weight}" }
```

--------------------------------

### i18n Parameter Passing in Vue Components (H5)

Source: https://unibest.tech/base/10-i18n

This example shows how to pass parameters to i18n strings in Vue components. Note that this syntax might only work on H5.

```html
<view class="m-4">{{ $t('weight', { heavy: 100 }) }}</view>
```

--------------------------------

### 使用 CLI 创建新项目

Source: https://unibest.tech/base/2-start

使用 `pnpm create unibest` 命令创建名为 `my-project` 的新项目。这是推荐的项目初始化方式。

```bash
pnpm create unibest my-project

cd my-project
pnpm install
pnpm dev
```

--------------------------------

### 构建与发布 CLI

Source: https://unibest.tech/base/18-cli

执行构建命令生成产物，并按照步骤发布到 npm 仓库。

```bash
pnpm build
```

```bash
# 1. 登录 npm
npm login --registry=https://registry.npmjs.org/

# 2. 升级版本
npm version patch

# 3. 构建
pnpm build

# 4. 发布
npm publish --no-workspaces --registry=https://registry.npmjs.org/
```

--------------------------------

### 运行开发模式与测试

Source: https://unibest.tech/base/18-cli

启动开发模式监听文件变化，并使用不同方式测试本地 CLI 功能。

```bash
pnpm dev
```

```bash
# 方式一：使用 start 脚本
pnpm start -- my-test-project

# 方式二：直接运行
node bin/index.js my-test-project
```

--------------------------------

### Manage unibest Project Dependencies

Source: https://unibest.tech/

Commands to initialize a new project with specific chart libraries or add them to an existing project.

```bash
# 创建项目时指定
pnpm create unibest my-project --lime-echart --ucharts

# 或交互式选择
pnpm create unibest my-project

# 为已有项目添加
pnpm create unibest add lime-echart ucharts
```

--------------------------------

### 更新 VSCode 文件嵌套配置

Source: https://unibest.tech/changelog/upgrade

在 .vscode/settings.json 中配置 explorer.fileNesting.patterns 以优化文件显示。

```json
"explorer.fileNesting.patterns": {
  "README.md": "index.html,favicon.ico,robots.txt,CHANGELOG.md",
  "pages.config.ts": "manifest.config.ts,openapi-ts-request.config.ts",
  "package.json": "pnpm-lock.yaml,pnpm-workspace.yaml,LICENSE,.gitattributes,.gitignore,.gitpod.yml,CNAME,.npmrc,.browserslistrc",
  ".oxlintrc.json": "tsconfig.json,.commitlintrc.*,.prettier*,.editorconfig,.commitlint.cjs,.eslint*"
}
```

--------------------------------

### 全局安装 Unibest CLI

Source: https://unibest.tech/base/2-start

在全局安装 `create-unibest` CLI 工具，以便能够创建新项目。推荐使用 pnpm 作为包管理器。

```bash
pnpm add -g create-unibest
```

--------------------------------

### 克隆与初始化项目

Source: https://unibest.tech/base/18-cli

获取项目源码并进入 CLI 目录进行依赖安装。

```bash
git clone https://github.com/feige996/unibest.git
cd unibest
```

```bash
cd packages/cli
```

```bash
pnpm install
```

--------------------------------

### Unibest Project Creation Workflow

Source: https://unibest.tech/base/14-faq

Visual representation of the project creation process using the CLI tool.

```text
pnpm create unibest my-project
         ↓
安装 create-unibest 包（来自 main 分支发布到 npm）
         ↓
从 Git base 分支克隆模板
```

--------------------------------

### 安装项目依赖和运行开发服务器

Source: https://unibest.tech/base/2-start

安装项目的所有依赖，并启动开发服务器以在 H5、微信小程序或 App 上运行项目。H5 端默认运行在 `http://localhost:9000/`。

```bash
pnpm i
pnpm dev     # 运行h5
pnpm dev:mp  # 运行微信小程序
pnpm dev:app # 运行App
```

--------------------------------

### CLI Development Workflow

Source: https://unibest.tech/base/14-faq

Commands for cloning the repository, developing the CLI, and testing it locally.

```bash
# 进入 unibest 仓库
git clone https://github.com/feige996/unibest.git
cd unibest

# 开发 CLI
cd packages/cli
pnpm install
pnpm dev    # 开发模式
pnpm build  # 构建发布

# 测试本地 CLI
pnpm start -- my-test-project
```

--------------------------------

### 修复 iOS 模拟器 esbuild 版本不匹配错误

Source: https://unibest.tech/base/14-faq

当 iOS 模拟器运行时出现 'Host version "0.20.2" does not match binary version "0.25.5"' 错误时，需要将 package.json 中的 esbuild 版本更新为与错误信息中显示的二进制版本一致，例如 0.20.2。

```json
{
  "dependencies": {
    "esbuild": "0.20.2"
  }
}
```

--------------------------------

### 更新 uni-helper 插件依赖

Source: https://unibest.tech/changelog/upgrade

在 package.json 中更新 uni-helper 相关插件的版本号。

```json
"@uni-helper/uni-types": "1.0.0-alpha.3",
"@uni-helper/unocss-preset-uni": "^0.2.11",
"@uni-helper/vite-plugin-uni-components": "0.2.0",
"@uni-helper/vite-plugin-uni-layouts": "0.1.10",
"@uni-helper/vite-plugin-uni-manifest": "0.2.8",
"@uni-helper/vite-plugin-uni-pages": "0.2.28",
"@uni-helper/vite-plugin-uni-platform": "0.0.4",
```

--------------------------------

### Create Unibest Project using PNPM

Source: https://unibest.tech/base/1-introduction

Initiates the creation of a new Unibest project named 'my-project' using the pnpm package manager. This command fetches the necessary packages and sets up the project structure.

```sh
pnpm create unibest my-project
```

--------------------------------

### 创建项目后添加功能

Source: https://unibest.tech/base/2-start

在项目创建完成后，可以使用 `pnpm create unibest add <feature>` 命令添加所需功能，如多语言、登录策略或图表库。

```bash
pnpm create unibest add i18n
pnpm create unibest add login
pnpm create unibest add lime-echart
pnpm create unibest add ucharts
pnpm create unibest add i18n login lime-echart ucharts
```

--------------------------------

### 本地调试技巧

Source: https://unibest.tech/base/18-cli

通过环境变量启用本地模板进行调试。

```bash
# 使用本地模板测试
LOCAL_TEMPLATE=true pnpm start -- my-test-project
```

--------------------------------

### 配置开发环境依赖

Source: https://unibest.tech/base/18-cli

开发前需确保系统安装了 Node.js 和 pnpm 的最低版本要求。

```bash
# 前置依赖
node >= 20
pnpm >= 9
```

--------------------------------

### Configure DingTalk mini-program in package.json

Source: https://unibest.tech/base/15-faq

Add these configurations to your package.json to define the DingTalk platform environment and build scripts.

```json
{
  "uni-app": {
    "scripts": {
      "mp-dingtalk": {
        "title": "钉钉小程序",
        "env": {
          "UNI_PLATFORM": "mp-alipay"
        },
        "define": {
          "MP-DINGTALK": true
        }
      }
    }
  }
}
```

```json
{
  "scripts": {
    "dev:mp-dingtalk": "uni -p mp-dingtalk"
  }
}
```

--------------------------------

### Create Unibest i18n Project

Source: https://unibest.tech/base/10-i18n

Use this command to create a new Unibest project with built-in i18n support.

```sh
pnpm create unibest my-project -t i18n
```

--------------------------------

### Generate UniApp Project with Unibest CLI

Source: https://unibest.tech/base/1-introduction

Use this command to scaffold a new UniApp project using the Unibest CLI. It initializes the project with the latest Vite-TS template.

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

--------------------------------

### Include Wot-design-uni Toast and Message Box in Layout

Source: https://unibest.tech/base/15-faq

Add `<wd-toast />` and `<wd-message-box />` components to your layout file to ensure they are globally available. This is automatically handled in unibest@2.1.0 and later.

```vue
<!-- src/layouts/default.vue -->
<template>
  <view>
    <slot />
    <wd-toast />
    <wd-message-box />
  </view>
</template>
```

--------------------------------

### 创建项目并指定功能

Source: https://unibest.tech/base/2-start

通过命令行参数直接指定项目需要的功能，如多语言 (`--i18n`)、登录策略 (`--login`) 和图表库 (`--lime-echart`, `--ucharts`)。

```bash
pnpm create unibest my-project --i18n --login --lime-echart --ucharts
```

--------------------------------

### 使用 static 目录图标

Source: https://unibest.tech/base/6-svg

直接通过路径引用位于 static 目录下的 SVG 文件。

```html
<image src="/static/svg/demo.svg" mode="scaleToFill" class="h-20 w-20" />
```

--------------------------------

### 升级 uniapp sdk

Source: https://unibest.tech/changelog/upgrade

使用 pnpm 或 npx 运行升级命令，进入交互式升级模式。

```sh
pnpm uvm  # 升级 uniapp sdk
# 如果以上命令不存在，请使用下面的
npx @dcloudio/uvm@latest
```

--------------------------------

### Unibest Project Directory Structure

Source: https://unibest.tech/base/1-introduction

Illustrates the typical directory structure of a UniApp project created with Unibest, highlighting the 'src' directory for source code and configuration files like 'pages.json' and 'manifest.json'.

```tree
my-project/                 # 用户项目
├── src/                    # 源码
├── pages.json              # 页面配置
├── manifest.json           # 应用配置
├── App.vue                 # 应用入口
├── main.ts                 # 入口文件
└── 其他配置文件
```

--------------------------------

### 使用色块占位图

Source: https://unibest.tech/other/image/image

在 Vue 组件中使用 placeholder.com 生成指定尺寸和颜色的占位图。

```vue
<image src="https://via.placeholder.com/400x200.png/3c9cff/fff"></image>
```

--------------------------------

### 配置 openapi-ts-request

Source: https://unibest.tech/base/17-generate

在根目录的 openapi-ts-request.config.ts 文件中定义接口文档路径及生成规则。

```ts
import type { GenerateServiceProps } from 'openapi-ts-request';

export default [
  {
    schemaPath: 'http://petstore.swagger.io/v2/swagger.json',
    serversPath: './src/service/app',
    requestLibPath: `import request from '@/utils/request';\n import { CustomRequestOptions } from '@/interceptors/request';`,
    requestOptionsType: 'CustomRequestOptions',
    isGenReactQuery: true,
    reactQueryMode: 'vue',
    isGenJavaScript: false,
  },
] as GenerateServiceProps[];
```

--------------------------------

### Root Component Template with Tabbar Integration

Source: https://unibest.tech/blog/2

This template integrates the KuRootView and conditionally displays the FgTabbar based on the current page route. It demonstrates how the tabbar is now managed within the root component, reducing user cognitive load.

```html
<template>
  <KuRootView />
  <FgTabbar v-if="isCurrentPageTabbar" />
  ...其他代码
</template>
```

--------------------------------

### 使用 wot-ui 图标

Source: https://unibest.tech/base/5-icons

wot-ui 图标支持 color 属性和 UnoCSS 设置，color 属性优先级更高。

```html
<wd-icon name="add-circle"></wd-icon>
<wd-icon name="add-circle" color="red"></wd-icon>
<wd-icon name="add-circle" class="text-green"></wd-icon>
<wd-icon name="add-circle" class="text-green" color="red"></wd-icon>
```

--------------------------------

### Use Wot-design-uni Message Component in Pages

Source: https://unibest.tech/base/15-faq

Import and use the `useMessage` function from 'wot-design-uni' to display messages. Ensure the component is correctly imported and initialized before calling its methods.

```typescript
import { useMessage } from 'wot-design-uni';

const message = useMessage();
const handleClick = () => {
  // 顺便测试 message 的使用
  message.show('显示隐藏切换');
};
```

--------------------------------

### 移除文件 git 管理

Source: https://unibest.tech/base/14-faq

使用 git rm -r --cached 命令将文件或文件夹从 git 缓存中移除，然后提交 commit 以正式生效。适用于需要将已加入 git 管理的文件移出管理的情况。

```shell
# git rm -r --cached file1 file2  ## 针对某些文件
# git rm -r --cached dir1 dir2  ## 针对某些文件夹
# git rm -r --cached .  ## 针对所有文件
```

```shell
git rm -r --cached .
# git commit
```

--------------------------------

### 使用 uv-ui 图标

Source: https://unibest.tech/base/5-icons

uv-ui 图标颜色仅支持 color 属性设置，UnoCSS 设置无效。

```html
<uv-icon name="home"></uv-icon>
<uv-icon name="home" color="red"></uv-icon>
<uv-icon name="home" class="text-green"></uv-icon>
<uv-icon name="home" color="red" class="text-green"></uv-icon>
```

--------------------------------

### 调用生成的 uni.request 接口

Source: https://unibest.tech/base/17-generate

直接调用生成的模块化请求函数进行数据获取。

```ts
import { getPetById } from '@/service/app';

onShow(() => {
  const res = await getPetById({ id: 1 });
  console.log('res: ', res);
});
```

--------------------------------

### 跳过 git 提交校验

Source: https://unibest.tech/base/14-faq

在 git commit 时，如果需要跳过提交校验，可以使用 --no-verify 参数。这对于一次性提交或引入第三方库时可能有用。

```shell
git commit -m "feat: xxx" --no-verify
```

--------------------------------

### 首次 Git commit

Source: https://unibest.tech/base/2-start

在项目初始化后，执行此命令进行首次 Git commit，将项目文件添加到暂存区并提交。

```bash
git add .
git commit -m "feat: init project"
```

--------------------------------

### 动态绑定 UI 库图标属性

Source: https://unibest.tech/base/5-icons

UI 库图标支持动态绑定 iconName 和 color 属性。

```ts
const iconName = ref<string>('contact');
const colorName = ref<string>('red');
onLoad(() => {
  setTimeout(() => {
    iconName.value = 'chat';
    colorName.value = 'green';
  }, 1000);
});
```

```html
<uni-icons :type="iconName" :color="colorName" class="text-green w-8"></uni-icons>
<!-- 其他2个UI库同样生效 -->
```

--------------------------------

### 使用随机真实图片

Source: https://unibest.tech/other/image/image

在 Vue 组件中使用 picsum.photos 生成指定尺寸的随机图片。

```vue
<image src="https://picsum.photos/400/200?random=1"></image>
```

--------------------------------

### VSCode 代码块生成页面模板

Source: https://unibest.tech/base/2-start

在 Vue 文件中输入 `v3` 并按 `Tab` 键，可以快速生成页面模板，利用 VSCode 的代码块功能提高开发效率。

```vue
v3
```

--------------------------------

### 在 Vue 组件中使用 Pinia

Source: https://unibest.tech/base/9-state

在组件中导入并实例化 store 以访问其状态和方法。

```vue
<template>
  <view class="flex justify-center items-center text-blue-500 mt-4 mb-4">
    <view class="w-20">Count: {{ countStore.count }}</view>
    <button class="ml-2 mr-2" @click="countStore.decrement">-1</button>
    <button class="ml-2 mr-2" @click="countStore.increment">+1</button>
    <button class="ml-2 mr-2" @click="countStore.reset">重置</button>
  </view>
</template>

<script lang="ts" setup>
import { useCountStore } from '@/store'

const countStore = useCountStore()
</script>
```

--------------------------------

### Pinia Store 调用位置修正

Source: https://unibest.tech/base/18-app

在 App 端使用 Pinia Store 时，必须在函数内部调用以确保 Pinia 已初始化，避免白屏问题。

```ts
// 错误写法
const userStore = useUserStore();
function foo() {
  userStore.xxx;
}
// 正确写法
function foo() {
  const userStore = useUserStore();
  userStore.xxx;
}
```

--------------------------------

### Use sp-editor component in uni-app

Source: https://unibest.tech/base/15-faq

The component is automatically registered via easycom, allowing direct usage in templates without manual imports.

```html
<template>
  <view class="home">
    <view class="editor-box">
      <sp-editor
        :toolbar-config="{
          excludeKeys: ['direction', 'date', 'lineHeight', 'letterSpacing', 'listCheck'],
          iconSize: '18px',
        }"
        @init="initEditor"
        @input="inputOver"
        @upinImage="upinImage"
        @overMax="overMax"
        @addLink="addLink"
        @exportHtml="exportHtml"
      ></sp-editor>
    </view>
  </view>
</template>
```

```vue
<route lang="json5">
{
  layout: 'demo',
  style: { navigationBarTitleText: '富文本' },
}
</route>

<template>
  <view class="home">
    <view class="editor-box">
      <sp-editor
        :toolbar-config="{
          excludeKeys: ['direction', 'date', 'lineHeight', 'letterSpacing', 'listCheck'],
          iconSize: '18px',
        }"
        @init="initEditor"
        @input="inputOver"
        @upinImage="upinImage"
        @overMax="overMax"
        @addLink="addLink"
        @exportHtml="exportHtml"
      ></sp-editor>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const editorIns = ref(null);

/**
 * 获取输入内容
 * @param {Object} e {html,text} 内容的html文本，和text文本
 */
function inputOver(e) {
  // 可以在此处获取到编辑器已编辑的内容
  console.log('==== inputOver :', e);
}

/**
 * 超出最大内容限制
 * @param {Object} e {html,text} 内容的html文本，和text文本
 */
function overMax(e) {
  // 若设置了最大字数限制，可在此处触发超出限制的回调
  console.log('==== overMax :', e);
}

/**
 * 编辑器就绪
 * @param {Object} editor 编辑器实例，你可以自定义调用editor实例的方法
 * @tutorial editor组件 https://uniapp.dcloud.net.cn/component/editor.html#editor-%E7%BB%84%E4%BB%B6
 * @tutorial 相关api https://uniapp.dcloud.net.cn/api/media/editor-context.html
 */
function initEditor(editor) {
  editorIns.value = editor; // 保存编辑器实例
  // 保存编辑器实例后，可以在此处获取后端数据，并赋值给编辑器初始化内容
  preRender();
}

function preRender() {
  setTimeout(() => {
    // 异步获取后端数据后，初始化编辑器内容
    editorIns.value.setContents({
      html: `<div>&nbsp;&nbsp;猫猫<img src="https://img.yzcdn.cn/vant/cat.jpeg"/></div>`,
    });
  }, 1000);
}

/**
 * 直接运行示例工程插入图片无法正常显示的看这里
 * 因为插件默认采用云端存储图片的方式
 * 以$emit('upinImage', tempFiles, this.editorCtx)的方式回调
 * @param {Object} tempFiles
 * @param {Object} editorCtx
 */
function upinImage(tempFiles, editorCtx) {
  /**
   * 本地临时插入图片预览
   * 注意：这里仅是示例本地图片预览，因为需要将图片先上传到云端，再将图片插入到编辑器中
   * 正式开发时，还请将此处注释，并解开下面 使用 uniCloud.uploadFile 上传图片的示例方法 的注释
   * @tutorial https://uniapp.dcloud.net.cn/api/media/editor-context.html#editorcontext-insertimage
   */
  // #ifdef MP-WEIXIN
  // 注意微信小程序的图片路径是在tempFilePath字段中
  editorCtx.insertImage({
    src: tempFiles[0].tempFilePath,
    width: '80%', // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑
    success: function () {},
  });
  // #endif

  // #ifndef MP-WEIXIN
  editorCtx.insertImage({
    src: tempFiles[0].path,
    width: '80%', // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑
    success: function () {},
  });
  // #endif

  /**
   * 使用 uniCloud.uploadFile 上传图片的示例方法（可适用多选上传）
   * 正式开发环境中，请将上面 本地临时插入图片预览 注释后，模仿以下写法
   */
  // tempFiles.forEach(async (item) => {
  //   uni.showLoading({
  //     title: '上传中请稍后',
  //     mask: true
  //   })
  //   let upfile = await uniCloud.uploadFile({
  //     filePath: item.path,
  //     // 同名会导致报错 policy_does_not_allow_file_overwrite
  //     // cloudPath可由 想要存储的文件夹/文件名 拼接，若不拼文件夹名则默认存储在cloudstorage文件夹中
  //     cloudPath: `cloudstorage/${item.name}`,
  //     cloudPathAsRealPath: true
  //   })
  //   editorCtx.insertImage({
  //     src: upfile.fileID,
  //     width: '80%', // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑
  //     success: function () {
  //       uni.hideLoading()
  //     }
  //   })
  // })
}

/**
 * 导出 - toolbar需要开启export工具
 * @param {string} e 导出的html内容
 */
function exportHtml(e) {
  uni.navigateTo({
    url: '/pages/out/out',
    success(res) {
      // 传至导出页面解析即可
      res.eventChannel.emit('e-transmit-html', {
        data: e,
      });
    },
  });
}

/**
 * 添加超链接
 * @param {Object} e { text: '链接描述', href: '链接地址' }
 */
function addLink(e) {
  console.log('==== addLink :', e);
}
</script>
```

--------------------------------

### 使用相对目录图标

Source: https://unibest.tech/base/6-svg

通过 import 导入本地 SVG 文件后，在模板中绑定 src 属性使用。

```typescript
<script lang="ts" setup>
  import iconUrl from './demo.svg'
</script>

<template>
  <image :src="iconUrl" mode="scaleToFill" class="h-20 w-20" />
</template>
```

--------------------------------

### 配置分包 - vite.config.ts

Source: https://unibest.tech/base/14-faq

在 vite.config.ts 文件中配置 subPackages 选项来指定分包的目录。确保配置项是一个数组，可以包含多个分包路径。

```typescript
UniPages({
    exclude: ['**\/components\/**\/.*'],
    subPackages: ['src\/pages-sub'], // 是个数组，可以配置多个
})
```

--------------------------------

### 配置 Pinia 持久化存储

Source: https://unibest.tech/base/9-state

通过重写 storage API 使 pinia-plugin-persistedstate 兼容 uni-app 的存储机制。

```ts
import { createPinia } from 'pinia'
import { createPersistedState } from 'pinia-plugin-persistedstate' // 数据持久化

const store = createPinia()
store.use(
  createPersistedState({
    storage: {
      getItem: uni.getStorageSync, // 看这里
      setItem: uni.setStorageSync, // 看这里
    },
  }),
)
```

--------------------------------

### DefinePage Async Configuration

Source: https://unibest.tech/base/3-plugin

Utilize definePage with an async function to fetch data, such as a page title, before configuring the page's style.

```js
definePage(async () => {
  const title = await fetchPageTitle();
  return {
    style: {
      navigationBarTitleText: title,
    },
  };
});
```

--------------------------------

### 使用 uni-ui 图标

Source: https://unibest.tech/base/5-icons

uni-ui 图标颜色需通过 color 属性设置，UnoCSS 设置无效。必须使用 size 属性控制大小。

```html
<uni-icons type="contact" size="30"></uni-icons>
<uni-icons type="contact" size="30" color="red"></uni-icons>
<uni-icons type="contact" size="30" class="text-green"></uni-icons>
<uni-icons type="contact" size="30" color="red" class="text-green"></uni-icons>
```

--------------------------------

### 实现通用 SvgIcon 组件

Source: https://unibest.tech/base/6-svg

创建一个通用的 SvgIcon 组件，用于在 H5 端渲染 SVG 图标。

```html
<template>
  <svg aria-hidden="true">
    <use :href="symbolId" :fill="color" />
  </svg>
</template>

<script lang="ts" setup name="SvgIcon">
  const props = withDefaults(
    defineProps<{
      prefix?: string
      name: string
      color?: string
    }>(),
    {
      prefix: 'icon',
      name: '',
      color: '#333',
    },
  )
  const symbolId = computed(() => `#${props.prefix}-${props.name}`)
</script>
```

--------------------------------

### Layout Configuration with DefinePage

Source: https://unibest.tech/base/3-plugin

Configure a page's layout using the `definePage` function, similar to using a route block, by specifying the desired layout name.

```ts
definePage({
  layout: 'demo',
  style: {
    navigationBarTitleText: '关于',
  },
});
```

--------------------------------

### Vite Configuration for Exclusions and SubPackages

Source: https://unibest.tech/base/3-plugin

Configure `vite-plugin-uni-pages` to exclude specific directories from page generation and to define sub-package directories.

```ts
UniPages({
  exclude: ['**/components/**/**.*'],
  subPackages: ['src/pages-sub'], // 是个数组，可以配置多个，但不能为 `src/pages` 里面的子目录
});
```

--------------------------------

### Demo Layout Component

Source: https://unibest.tech/base/3-plugin

A sample layout component that includes a slot for rendering child page content. This can be used for common UI elements like navigation bars or tab bars.

```vue
<template>
  <view>
    <!-- 这里可以写通用的布局，比如导航栏，tabbar等 -->
    <!-- slot里面装的就是子页面的内容 -->
    <slot />
  </view>
</template>
```

--------------------------------

### 配置 iconfont 样式

Source: https://unibest.tech/other/iconfont/iconfont

在项目的全局样式文件中定义 @font-face 和基础图标类。注意在 APP 环境下需将 url 协议补全为 https。

```css
@font-face {
  font-family: iconfont; /* Project id 4032028 */
  src:
    url('//at.alicdn.com/t/c/font_4032028_mbcuy517h6.woff2?t=1713685013355') format('woff2'),
    url('//at.alicdn.com/t/c/font_4032028_mbcuy517h6.woff?t=1713685013355') format('woff'),
    url('//at.alicdn.com/t/c/font_4032028_mbcuy517h6.ttf?t=1713685013355') format('truetype');
}

.iconfont {
  font-family: iconfont !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-facebook::before {
  content: '\e87d';
}

.icon-twitter::before {
  content: '\e646';
}

.icon-telegram::before {
  content: '\f245';
}
```

--------------------------------

### 配置 UnoCSS 预设与转换器

Source: https://unibest.tech/base/4-style

完整的 unocss.config.ts 配置文件，包含针对小程序和 H5 的环境判断、图标支持、兼容性处理及自定义快捷方式。

```ts
// uno.config.ts
import {
  type Preset,
  defineConfig,
  presetUno,
  presetAttributify,
  presetIcons,
  transformerDirectives,
  transformerVariantGroup,
} from 'unocss'

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

// @see https://unocss.dev/presets/legacy-compat
import { presetLegacyCompat } from '@unocss/preset-legacy-compat'

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

const presets: Preset[] = []
if (isMp) {
  // 使用小程序预设
  presets.push(presetApplet(), presetRemRpx())
} else {
  presets.push(
    // 非小程序用官方预设
    presetUno(),
    // 支持css class属性化
    presetAttributify(),
  )
}
export default defineConfig({
  presets: [
    ...presets,
    // 支持图标，需要搭配图标库，eg: @iconify-json/carbon, 使用 `<button class="i-carbon-sun dark:i-carbon-moon" />`
    presetIcons({
      scale: 1.2,
      warn: true,
      extraProperties: {
        display: 'inline-block',
        'vertical-align': 'middle',
      },
    }),
    // 将颜色函数 (rgb()和hsl()) 从空格分隔转换为逗号分隔，更好的兼容性app端，example：
    // `rgb(255 0 0)` -> `rgb(255, 0, 0)`
    // `rgba(255 0 0 / 0.5)` -> `rgba(255, 0, 0, 0.5)`
    presetLegacyCompat({
      commaStyleColorFunction: true,
    }) as Preset,
  ],
  /**
   * 自定义快捷语句
   * @see https://github.com/unocss/unocss#shortcuts
   */
  shortcuts: [['center', 'flex justify-center items-center']],
  transformers: [
    // 启用 @apply 功能
    transformerDirectives(),
    // 启用 () 分组功能
    // 支持css class组合，eg: `<div class="hover:(bg-gray-400 font-medium) font-(light mono)">测试 unocss</div>`
    transformerVariantGroup(),
    // Don't change the following order
    transformerAttributify({
      // 解决与第三方框架样式冲突问题
      prefixedOnly: true,
      prefix: 'fg',
    }),
  ],
  rules: [
    [
      'p-safe',
      {
        padding:
          'env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)',
      },
    ],
    ['pt-safe', { 'padding-top': 'env(safe-area-inset-top)' }],
    ['pb-safe', { 'padding-bottom': 'env(safe-area-inset-bottom)' }],
  ],
})
```

--------------------------------

### 使用 iconfont 图标

Source: https://unibest.tech/base/5-icons

在项目中引入 iconfont 样式后，通过 class 使用图标。

```html
<view class="m-4">
  <text mr-2>iconfont:</text>
  <i class="iconfont icon-package text-red"></i>
  <i class="iconfont icon-chat text-red"></i>
  <i class="iconfont icon-my text-red"></i>
</view>
```

--------------------------------

### DefinePage Dynamic Configuration

Source: https://unibest.tech/base/3-plugin

Configure page styles dynamically using a function with definePage, allowing for computed values like a dynamic navigation bar title.

```js
definePage(() => ({
  style: {
    navigationBarTitleText: computedTitle(),
  },
}));
```

--------------------------------

### 使用生成的 Vue Query 代码

Source: https://unibest.tech/base/17-generate

利用自动生成的 QueryOptions 和 Mutation 钩子进行状态管理。

```ts
import { useQuery } from '@tanstack/vue-query'
import { findPetsByStatusQueryOptions, usePlaceOrderMutation } from '@/service/app'

// get请求使用，findPetsByStatusQueryOptions 方法为自动生成 react-query 函数
export function findPetsByStatusQueryOptions(options: {
  // 叠加生成的Param类型 (非body参数openapi默认没有生成对象)
  params: API.findPetsByStatusParams;
  options?: CustomRequestOptions;
}) {
  return queryOptions({
    queryFn: async ({ queryKey }) => {
      return apis.findPetsByStatus(queryKey[1] as typeof options);
    },
    queryKey: ['findPetsByStatus', options],
  });
}

// vue-query useQuery 默认使用
const {
  data,
  error
  isLoading,
  refetch,
} = useQuery(findPetsByStatusQueryOptions({ params: { status: ['available'] } }))

// vue-query useQuery 额外配置
const {
  data,
  error
  isLoading,
  refetch,
} = useQuery({
  ...findPetsByStatusQueryOptions({ params: { status: ['available'] } }),
  enabled: !!token,
})

// post, delete, patch请求使用，usePlaceOrderMutation 为自动生成 vue-query hook函数
export function usePlaceOrderMutation(options?: {
  onSuccess?: (value?: API.Order) => void;
  onError?: (error?: DefaultError) => void;
}) {
  const { onSuccess, onError } = options || {};

  const response = useMutation({
    mutationFn: apis.placeOrder,
    onSuccess(data: API.Order) {
      onSuccess?.(data);
    },
    onError(error) {
      onError?.(error);
    },
  });

  return response;
}

// 定义请求
const { mutate, isPending } = usePlaceOrderMutation({
  onSuccess: (data) => {
    console.log('success data: ', data)
  },
})

// 提交请求
mutate({
  body: {
    status: 'placed',
    complete: true,
  }
})
```

--------------------------------

### 定义和使用 reactive 简单状态

Source: https://unibest.tech/base/9-state

使用 reactive 创建响应式对象，并直接在组件中导入使用。

```ts
export const countStore = reactive({
  count: 0,
  increment() {
    this.count++
  },
})
```

```vue
<script setup lang="ts">
import { countStore } from './count.ts'
</script>

<template>
  <button @click="countStore.increment()">
    {{ countStore.count }}
  </button>
</template>
```

--------------------------------

### Calculate rpx for 750px design width

Source: https://unibest.tech/base/4-style

Formula for converting a 100px element from a 750px design draft to rpx.

```text
750 * 100 / 750
```

--------------------------------

### 使用 SvgIcon 组件

Source: https://unibest.tech/base/6-svg

在模板中通过 name 属性调用 SvgIcon 组件。

```html
<!-- src/assets/demo.svg -->
<SvgIcon name="demo" class="h-20 w-20"></SvgIcon>

<!-- src/assets/dir/demo.svg -->
<SvgIcon name="dir-demo" class="h-20 w-20"></SvgIcon>
```

--------------------------------

### 定义 Pinia 全局状态

Source: https://unibest.tech/base/9-state

使用 defineStore 定义状态，并通过 persist 选项控制是否开启数据持久化。

```ts
import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useCountStore = defineStore(
  'count',
  () => {
    const count = ref(0)
    const increment = () => {
      count.value++
    }
    const decrement = () => {
      count.value--
    }
    const reset = () => {
      count.value = 0
    }
    return {
      count,
      decrement,
      increment,
      reset,
    }
  },
  {
    // 如果需要持久化就写 true, 不需要持久化就写 false（或者去掉这个配置项）
    persist: true,
  },
)
```

--------------------------------

### Index Page Configuration with Route Block

Source: https://unibest.tech/base/3-plugin

Configure the index page by setting `type="home"` within its route block. Ensure only one page has this configuration to avoid conflicts.

```vue
<route lang="json5" type="home">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
  },
}
</route>
<template>
  <div>
    <h1>欢迎使用 unibest</h1>
    <h4>unibest 是最好的 uniapp 开发模板</h4>
  </div>
</template>
```

--------------------------------

### Calculate rpx for 640px design width

Source: https://unibest.tech/base/4-style

Formula for converting a 100px element from a 640px design draft to rpx.

```text
750 * 100 / 640
```

--------------------------------

### Calculate rpx for 375px design width

Source: https://unibest.tech/base/4-style

Formula for converting a 200px element from a 375px design draft to rpx.

```text
750 * 200 / 375
```

--------------------------------

### 使用生成的 TS 类型

Source: https://unibest.tech/base/17-generate

引入自动生成的类型定义文件以确保数据结构的一致性。

```ts
import { type Category } from '@/service/app';

const category: Category = {
  id: 1,
  name: '张三',
};
```

--------------------------------

### 使用 vite-svg-loader 导入 SVG

Source: https://unibest.tech/base/6-svg

利用 vite-svg-loader 插件以 URL、Raw 或 Component 形式导入 SVG。

```javascript
import iconUrl from './my-icon.svg?url'
// 'data:image/svg+xml...'
```

```html
<template>
  <image :src="iconUrl" mode="scaleToFill" class="h-20 w-20" />
</template>
```

```javascript
import iconRaw from './my-icon.svg?raw'
// '<?xml version="1.0"?>...'
```

```html
<template>{{ iconRaw }}</template>
```

```javascript
import IconComponent from './my-icon.svg?component'
// <IconComponent />
```

```html
<template>
  <IconComponent />
</template>
```

--------------------------------

### Tabbar Component Configuration Object

Source: https://unibest.tech/base/2-tabbar

Constructs the final `TabBar` configuration object, including custom properties, colors, dimensions, and the generated list of items. Note that the `custom` property is only effective in WeChat Mini Programs.

```typescript
const _tabbar: TabBar = {
  // 只有微信小程序支持 custom。App 和 H5 不生效
  custom: selectedTabbarStrategy === TABBAR_STRATEGY_MAP.CUSTOM_TABBAR,
  color: '#999999',
  selectedColor: '#018d71',
  backgroundColor: '#F8F8F8',
  borderStyle: 'black',
  height: '50px',
  fontSize: '10px',
  iconWidth: '24px',
  spacing: '3px',
  list: _tabbarList as unknown as TabBar['list'],
};

export const tabBar = tabbarCacheEnable ? _tabbar : undefined;
```

--------------------------------

### 使用线上地址图标

Source: https://unibest.tech/base/6-svg

直接在 image 标签的 src 属性中指定 SVG 的线上 URL。

```html
<template>
  <image src="https://xxx.com/demo.svg" mode="scaleToFill" class="h-20 w-20" />
</template>
```

--------------------------------

### 使用 iconfont 图标

Source: https://unibest.tech/other/iconfont/iconfont

在模板中通过 i 标签配合对应的类名使用图标。

```html
<i class="iconfont icon-facebook"></i>
```

--------------------------------

### DefinePage Static Configuration

Source: https://unibest.tech/base/3-plugin

Use the definePage function for static configuration of page styles, such as setting the navigation bar title.

```js
definePage({
  style: {
    navigationBarTitleText: '首页',
  },
});
```

--------------------------------

### Unibest CLI and Template Structure

Source: https://unibest.tech/base/1-introduction

Details the Monorepo structure of Unibest, separating the CLI scaffolding tool in 'packages/cli' from the template source code. The CLI is published as an npm package.

```tree
unibest/                    # 主仓库（main 分支）
├── packages/
│   └── cli/                # CLI 脚手架工具（发布到 npm）
├── src/                    # 模板源码
└── 其他配置文件
```

--------------------------------

### Tabbar Strategy Map and Selection

Source: https://unibest.tech/base/2-tabbar

Defines the mapping for tabbar strategies and allows selection of the active strategy. Ensure to re-run the build process after any changes to this section for the configuration to take effect.

```typescript
/**
 * tabbar 选择的策略，更详细的介绍见 tabbar.md 文件
 * 0: 'NO_TABBAR' `无 tabbar`
 * 1: 'NATIVE_TABBAR'  `原生 tabbar`
 * 2: 'CUSTOM_TABBAR' `自定义 tabbar`
 *
 * 温馨提示：本文件的任何代码更改了之后，都需要重新运行，否则 pages.json 不会更新导致配置不生效
 */
export const TABBAR_STRATEGY_MAP = {
  NO_TABBAR: 0,
  NATIVE_TABBAR: 1,
  CUSTOM_TABBAR: 2,
};

// TODO: 1/3. 通过这里切换使用tabbar的策略
// 如果是使用 NO_TABBAR(0)，nativeTabbarList 和 customTabbarList 都不生效
// 如果是使用 NATIVE_TABBAR(1)，只需要配置 nativeTabbarList，customTabbarList 不生效
// 如果是使用 CUSTOM_TABBAR(2)，只需要配置 customTabbarList，nativeTabbarList 不生效
export const selectedTabbarStrategy = TABBAR_STRATEGY_MAP.CUSTOM_TABBAR;
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.