快速开始

本指南将帮助你在几分钟内完成 ERP 组件库的安装与配置。

环境要求

• Node.js >= 16.0.0
• Vue >= 3.2.0
• 推荐使用 pnpm 作为包管理器

安装

pnpm

pnpm add @erp/common @erp/biz

npm

npm install @erp/common @erp/biz

yarn

yarn add @erp/common @erp/biz

配置

全局注册

在 main.ts 中引入并注册组件库：

import { createApp } from 'vue'
import { FkComponents } from '@erp/common'
import '@erp/common/dist/style.css'
import App from './App.vue'

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

按需引入

推荐在生产环境使用按需引入，减少打包体积：

import { FkButton, FkInput, FkTable } from '@erp/common'

自动导入（推荐）

配合 unplugin-vue-components 实现自动按需导入：

pnpm add -D unplugin-vue-components

// vite.config.ts
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Components({
      resolvers: [
        (name) => {
          if (name.startsWith('Fk')) {
            return { name, from: '@erp/common' }
          }
        }
      ]
    })
  ]
})

第一个组件

<template>
  <div class="demo">
    <FkInput v-model="value" placeholder="请输入内容" clearable />
    <FkButton type="primary" @click="handleClick">提交</FkButton>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
const handleClick = () => {
  console.log('输入值:', value.value)
}
</script>

主题定制

通过 CSS 变量自定义主题色：

:root {
  --fk-color-primary: #667eea;
  --fk-color-success: #28a745;
  --fk-color-warning: #ffc107;
  --fk-color-danger: #dc3545;
  --fk-border-radius: 6px;
}

TypeScript 支持

组件库提供完整的类型定义：

import type { FormConfig, TableColumn, InputProps } from '@erp/common'

const formConfig: FormConfig = {
  items: [
    { type: 'input', prop: 'name', label: '姓名', required: true }
  ]
}

下一步

📖组件文档查看所有组件的 API 与示例🎨主题定制自定义组件库视觉风格📋代码模板快速复用的代码片段

提示

使用按需导入可显著减少打包体积，推荐在生产环境使用。

注意

请确保 Vue 版本 >= 3.2.0，以获得最佳兼容性。