安装

环境要求

• Node.js >= 16
• Vue.js >= 3.0

包管理器安装

使用 npm

查看代码

npm install @imtes/ui

使用 yarn

查看代码

yarn add @imtes/ui

使用 pnpm

查看代码

pnpm add @imtes/ui

快速开始

完整引入

在 main.js 中写入以下内容：

查看代码

import { createApp } from 'vue'
import ImtesUI from '@imtes/ui'
import '@imtes/ui/lib/style.css'
import App from './App.vue'

const app = createApp(App)
app.use(ImtesUI)
app.mount('#app')

以上代码便完成了 Imtes UI 的引入。需要注意的是，样式文件需要单独引入。

按需引入

如果你只希望引入部分组件，比如 Button 和 Table，那么需要在 main.js 中写入以下内容：

查看代码

import { createApp } from 'vue'
import { ImButton, ImElTable } from '@imtes/ui'
import App from './App.vue'

const app = createApp(App)
app.use(ImButton)
app.use(ImElTable)
app.mount('#app')

自动导入（推荐）

首先你需要安装 unplugin-vue-components 和 unplugin-auto-import 这两款插件：

查看代码

npm install -D unplugin-vue-components unplugin-auto-import

然后把下列代码插入到你的 vite.config.js 中：

查看代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ['vue'],
      resolvers: []
    }),
    Components({
      resolvers: [
        // 自动导入 Imtes UI 组件
        (componentName) => {
          if (componentName.startsWith('Im'))
            return { name: componentName, from: '@imtes/ui' }
        }
      ]
    })
  ]
})

开始使用

现在你可以在 Vue 组件中使用 Imtes UI 了：

查看代码

<template>
  <div>
    <ImButton type="primary">主要按钮</ImButton>
    <im-el-table :data="tableData" :columns="columns" />
  </div>
</template>

<script setup>
// 如果使用自动导入，无需手动导入组件
// 如果使用按需导入，需要手动导入：
// import { ImButton, ImElTable } from '@imtes/ui'

const tableData = [
  { id: 1, name: '张三', age: 18 },
  { id: 2, name: '李四', age: 25 }
]

const columns = [
  { field: 'id', title: 'ID', width: 80 },
  { field: 'name', title: '姓名', width: 120 },
  { field: 'age', title: '年龄', width: 100 }
]
</script>

全局配置

在引入 Imtes UI 时，可以传入一个全局配置对象。该对象目前支持 size 与 zIndex 字段。size 用于改变组件的默认尺寸，zIndex 设置弹框的初始 z-index（默认值：2000）。

完整引入：

查看代码

import { createApp } from 'vue'
import ImtesUI from '@imtes/ui'
import App from './App.vue'

const app = createApp(App)
app.use(ImtesUI, { size: 'small', zIndex: 3000 })
app.mount('#app')

注意事项

• Imtes UI 基于 Element Plus 构建，因此需要确保项目中已安装 Element Plus 相关依赖
• 组件库使用 Tailwind CSS 进行样式管理，建议在项目中也使用 Tailwind CSS
• 表格组件基于 VXE Table，功能强大但体积较大，按需使用

下一步

现在你已经把 Imtes UI 添加到了你的项目中，接下来请阅读各个组件的使用文档：

• Button 按钮
• Table 表格