### Install with npm

Source: https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/site/docs/getting-started.en-US.md

Install TDesign MiniProgram using npm.

```bash
npm i tdesign-miniprogram -S --production
```

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

### Preview in developer tools

Source: https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/site/docs/getting-started.en-US.md

Commands to install dependencies and compile for previewing in WeChat Developer Tools.

```bash
# Install project dependencies
npm install

# compile
npm run dev
```

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

### Install via NPM

Source: https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/site/docs/getting-started.md

Install TDesign UniApp components using npm.

```bash
npm i tdesign-uniapp
```

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

### Use components in wxml

Source: https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/site/docs/getting-started.en-US.md

Use the TDesign button component directly in wxml.

```html
<t-button theme="primary">按钮</t-button>
```

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

### Installation

Source: https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/auto-import-resolver/README.md

Install the necessary packages via npm, yarn, pnpm, or Bun.

```shell
# via npm
npm i tdesign-uniapp-auto-import-resolver unplugin-vue-components unplugin-auto-import -D

# via yarn
yarn add tdesign-uniapp-auto-import-resolver unplugin-vue-components unplugin-auto-import -D

# via pnpm
pnpm add tdesign-uniapp-auto-import-resolver unplugin-vue-components unplugin-auto-import -D

# via Bun
bun add tdesign-uniapp-auto-import-resolver unplugin-vue-components unplugin-auto-import -D
```

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

### Global Customization - App.vue Example

Source: https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/site/docs/custom-theme.md

Example of how to set a custom theme color in App.vue.

```css
page {
  --td-brand-color: navy; // 任何你想要的主题色
}
```

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

### Install via NPM

Source: https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/site-chat/docs/getting-started.md

Install the TDesign UniApp Chat component library using npm.

```bash
npm i tdesign-uniapp-chat
```

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

### 引入组件

Source: https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/progress/README.md

可在 `main.ts` 或在需要使用的页面或组件中引入。

```js
import TProgress from 'tdesign-uniapp/progress/progress.vue';
```

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

### Use components in JSON

Source: https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/site/docs/getting-started.en-US.md

Introduce the custom component for the button in the JSON file.

```json
{
  "usingComponents": {
    "t-button": "tdesign-miniprogram/button/button"
  }
}
```

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

### Development Commands

Source: https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/site/docs/getting-started.md

Commands for installing dependencies, compiling components, and running the mini-program development server.

```bash
# 安装项目依赖
npm install

# 执行组件编译
npm run dev

# 小程序
npm run dev:mp
```

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

### 引入

Source: https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/form/README.md

可在 `main.ts` 或在需要使用的页面或组件中引入。

```js
import TForm from 'tdesign-uniapp/form/form.vue';
import TFormItem from 'tdesign-uniapp/form-item/form-item.vue';
```

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

### Modify tsconfig.json for TypeScript

Source: https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/site/docs/getting-started.en-US.md

Configure tsconfig.json to specify paths for TDesign components when using TypeScript.

```json
{
  "paths": {
      "tdesign-miniprogram/*":["./miniprogram/miniprogram_npm/tdesign-miniprogram/*"]
    }
}
```

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

### ResolveIcons Option Example

Source: https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/auto-import-resolver/README.md

Example of using the 'resolveIcons' option with TDesignResolver.

```typescript
Components({
  resolvers: [
    TDesignResolver({
      resolveIcons: true,
    }),
  ],
});
```

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

### 引入

Source: https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/tdesign/loading/README.md

可在 `main.ts` 或在需要使用的页面或组件中引入。

```js
import TLoading from 'tdesign-uniapp/loading/loading.vue';
```

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

### Library Option Example

Source: https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/auto-import-resolver/README.md

Example of using the 'library' option with TDesignResolver.

```typescript
Components({
  resolvers: [
    TDesignResolver({
      library: 'vue-next',
    }),
  ],
});
```

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

### Exclude Option Example

Source: https://github.com/novlan1/tdesign-uniapp/blob/develop/packages/auto-import-resolver/README.md

Example of using the 'exclude' option with TDesignResolver.

```typescript
Components({
  resolvers: [
    TDesignResolver({
      exclude: ['TButton'],
    }),
  ],
});
```