Initialization
Install Dependencies
In any Vue 3 project, install the dependencies using the following code:
npm i @techui/admin
This component library depends on the following TechUI ecosystem packages (no manual installation required):
@techui/colors- Color System@techui/lessmixins- LESS Mixins@techui/locales- Internationalization (i18n)@techui/themes- Theme System@techui/libs- Utility Library@techui/utils- Utility Functions
Potential Exceptions
Theoretically, when installing the @techui/admin component library, the TechUI ecosystem packages should be installed automatically. However, in some cases, such as when using pnpm, the TechUI ecosystem dependencies might not be installed together. In such cases, please install these dependencies manually.
Disable Pre-bundling
Configure the following code in vite.config.js to disable pre-bundling for the TechUI-Admin component library.
export default defineConfig({
...
optimizeDeps: {
exclude: ['@techui/admin']
},
})Reason for Disabling Pre-bundling
In this framework package, Wasm modules are used to provide calculation, licensing, permission control, and template string functions. When Vite performs pre-bundling optimization, it excludes Wasm modules. Therefore, it is necessary to disable pre-bundling for the TechUI-Admin component library; otherwise, it cannot run properly.
Potential Errors
Theoretically, you only need to add the TechUI-Admin component library to the pre-bundling exclusion list. However, in some cases, other ecosystem packages also need to be added to the exclusion list.
Currently known error: Vite 7.3.1 + TS environment: Confirmed that @techui/themes must be added to the exclude list, otherwise exception errors will occur.
If you encounter errors that are difficult to debug, you can try adding all ecosystem packages to the pre-bundling exclusion list for troubleshooting.
Initialize Core Module
Configure the following code in main.js.
import TechUIInit from "techui-admin"
const app = createApp(App);
const params={
app,
debug:true, // Debug mode
features:{ // Advanced component features available after authorization; can also be experienced without authorization
echarts:true, // Echarts wrapper components and Echarts themes, disabled by default
advanced:true,// Advanced components, disabled by default
}
}
TechUIInit(params).then(()=>{
app.use(router)
app.use(store)
app.mount('#app')
})Reason for Async Loading
In this framework package, since Wasm modules are built-in and loaded asynchronously, initialization must wait until the Wasm modules are fully loaded.
Introduction to Debug Mode
All TechUI projects include a debug mode. Once activated, you can monitor DOM element size changes, changes within containers, bound events, timers, etc., in the page. You can also monitor all states in TuiService.
Please jump to the Debug Mode section in the "Global Service" chapter to view detailed instructions on debug mode.
Import Provider Component
**Import TuiProvider in app.vue** and wrap the top-level container, such as the router.
<template>
<TuiProvider>
<router-view></router-view>
</TuiProvider>
</template>Provider Component Explanation
TuiProvider was developed referencing top-level Provider components in various React component libraries. In this component, Vue 3's Provide is used to conveniently supply global state, variables, methods, etc., to all TechUI components. These can be quickly injected into child components via inject('$global').
For a detailed description of TuiProvider, please click to view the Provider chapter.
Configuration Complete
On-Demand Import Not Supported
This framework currently does not support on-demand import. The reasons are not elaborated here. If you are interested in this topic, please jump to the "About" chapter's Why is on-demand import not supported section for a detailed explanation.
Quick Start Test Cases
You can directly download test cases and the minimal startup project to quickly enter the development phase, at the following addresses:
Test Cases & Quick Start