quickstart-Tui

快速开始

Tui UI 的快速入门和使用教程

准备工作

安装tui的对应版本或者最新版本

收起示例

bash

// 安装指定版本 - 推荐安装指定版本
npm install tui@0.3.7 --registry https://npm.timeszit.cn

// 或者直接更新最新版本
npm install tui --registry https://npm.timeszit.cn

必要配置 -主题配置

为了零侵入, Tui UI 需要配置主题才能正确使用组件的样式

收起示例

// main.ts
import { setTsTheme } from 'tui'

// 必须调用，设置主题模式
setTsTheme('light')

以及如何在SSR项目中正确的配置方法, 这里以Nuxt3为例

收起示例

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      htmlAttrs: {
        "data-ts-theme": "light",
      },
    },
  },
})

项目引入 - [全量引入 OR 按需引入]

收起示例

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import Tui from 'tui'
import 'tui/dist/index.css'

createApp(App).use(Tui).mount('#app')

以及如何在SSR项目中正确的配置方法, 这里以Nuxt3为例

收起示例

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { TsButton } from 'tui'

const app = createApp(App)
app.component('TsButton', TsButton)

注意事项

组件提供职责清晰的方法，确保功能单一、易于理解。

组件名称、props 参数、回调函数等可能变动
请严格查看每个版本的 Changelog
升级前做好充分测试，避免 API 变动导致问题