初始化

安装依赖

在任意的vue3项目中，通过以下代码安装依赖

npm i @techui/base

该组件库依赖以下 TechUI 生态系统包（无需手动安装）:

@techui/colors - 色彩系统
@techui/lessmixins - LESS 混入
@techui/locales - 国际化
@techui/themes - 主题系统
@techui/libs - 工具库
@techui/utils - 工具函数

可能遇到的异常

理论上在安装@techui/base组件库的时候，会把TechUI生态包一并自动安装，但在某些情况下，如使用pnpm安装时，TechUI生态依赖包并未被一并安装，此时请手动安装这些依赖。

禁止预构建

在 vite.config.js 中配置以下代码禁用对TechUI-Base组件库进行预构建

export default defineConfig({
  ...
  optimizeDeps: {
    exclude: ['@techui/base']
  },
})

禁用预构建原因

在本框架包中，使用了Wasm模块提供计算，许可证、权限控制、模板字符串等功能，Vite进行预构建优化的时候，会排除Wasm模块，所以需要禁止对TechUI-Base组件库进行预构建，否则无法正常运行。

可能遇到的报错

理论上只需要把 TechUI-Base 组件库放到禁止预构建的名单，但是某些情况下，需要把其余的一些生态包也放到预构建排除的名单内部。

目前已知报错：Vite 7.3.1 + TS 环境：已确认必须将 @techui/themes 添加到 exclude 名单中，否则会导致异常报错。

如遇到一些无法调试的报错，可以把所有生态包都添加到预构建排除名单进行排查。

初始化Core模块

在 main.js 中配置以下代码

import TechUIInit from "techui-base"

const app = createApp(App);
const params={
  app,
  debug:true,     //调试模式
  features:{      //授权后可使用的高级组件功能，未授权也可体验
    echarts:true, //Echarts封装组件与Echarts主题，默认关闭
    advanced:true,//高级组件，默认关闭
  }
}
TechUIInit(params).then(()=>{
  app.use(router)
  app.use(store)
  app.mount('#app')
})

异步加载原因

在本框架包中，因为内置了Wasm模块，并且它的加载是异步的，所以需要等待Wasm模块加载完毕后再进行初始化。

调试模式简介

TechUI所有工程均包含debug模式，激活后可以监测页面中Dom元素的尺寸变化、容器内元素变化、绑定事件、计时器等。也可以监测TuiService中的所有的状态。

请跳转到“全局服务”章节的调试模式来查看详细的调试模式说明。

引入Provider组件

在app.vue中引入TuiProvider，包裹顶层容器，如路由。

html

<template>
  <TuiProvider>
    <router-view></router-view>
  </TuiProvider>
</template>

Provider组件说明

参考React各个组件库中的顶层Provider组件而开发了TuiProvider，在这个组件中，使用了vue3的Provide方便向所有的TechUI组件提供了全局的状态，变量，方法等内容，在子组件中通过inject('$global')来快速注入。

TuiProvider的详细说明，请点击查阅 Provider 章节

配置结束

不支持按需引入

本框架目前不提供按需引入的功能，但不在这里赘述原因，如果你对这个话题感兴趣，请跳转到“关于”章节的为什么不支持按需引入查看详细说明。

快速启动测试用例

可以直接下载测试用例以及最小启动工程，快速进入开发阶段，如下地址：

测试用例&快速启动

中国大陆 Gitee
其他地区 Github

初始化 ​

安装依赖 ​

禁止预构建 ​

初始化Core模块 ​

引入Provider组件 ​

配置结束 ​