Avue.js 技术文档详解

【免费下载链接】avue 🔥Avue.js是基于现有的element-plus库进行的二次封装，简化一些繁琐的操作，核心理念为数据驱动视图,主要的组件库针对table表格和form表单场景，同时衍生出更多企业常用的组件，达到高复用，容易维护和扩展的框架，同时内置了丰富了数据展示组件，让开发变得更加容易。 项目地址: https://gitcode.com/superwei/avue

1. 安装指南

1.1 环境要求

• Node.js 14.x 或更高版本
• Vue 3.x
• Element Plus 2.x

1.2 安装方式

方式一：使用 pnpm（推荐）

pnpm add @smallwei/avue

方式二：使用 npm

npm install @smallwei/avue

方式三：使用 yarn

yarn add @smallwei/avue

1.3 文件说明

文件名	用途	说明
avue.min.js	生产环境使用	压缩优化版本，体积更小
avue.js	开发环境使用	包含完整的调试信息

2. 项目使用说明

2.1 完整引入方式

import { createApp } from 'vue'
import Avue from '@smallwei/avue'
import '@smallwei/avue/dist/avue.css'
import App from './App.vue'

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

2.2 按需引入（推荐）

import { AvueCrud, AvueForm } from '@smallwei/avue'
import '@smallwei/avue/dist/avue.css'

2.3 核心功能

• 数据驱动视图：通过配置数据自动生成UI组件
• 表格组件：支持复杂表格场景配置
• 表单组件：支持动态表单生成
• 扩展组件：提供企业级常用组件

3. 项目API使用文档

3.1 AvueCrud 表格组件API

基本配置

const option = {
  column: [
    {
      label: '姓名',
      prop: 'name',
      rules: [{ required: true }]
    },
    {
      label: '年龄',
      prop: 'age',
      type: 'number'
    }
  ]
}

常用属性

属性名	类型	说明
data	Array	表格数据源
option	Object	表格配置项
page	Object	分页配置
search	Object	搜索表单配置

3.2 AvueForm 表单组件API

基本配置

const formOption = {
  column: [
    {
      label: '用户名',
      prop: 'username',
      rules: [{ required: true }]
    },
    {
      label: '密码',
      prop: 'password',
      type: 'password'
    }
  ]
}

常用方法

方法名	说明
validate	表单验证
resetForm	重置表单
getData	获取表单数据

4. 项目安装方式详解

4.1 完整安装流程

1. 创建Vue项目

npm init vue@latest

2. 安装Element Plus

npm install element-plus

3. 安装Avue.js

npm install @smallwei/avue

4. 在main.js中配置

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import Avue from '@smallwei/avue'
import '@smallwei/avue/dist/avue.css'
import App from './App.vue'

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

4.2 最佳实践建议

1. 对于大型项目，推荐按需引入组件
2. 生产环境请使用压缩版本(avue.min.js)
3. 表格大数据量场景建议开启虚拟滚动
4. 复杂表单建议分组处理

4.3 常见问题解决

1. 样式不生效：确保正确引入CSS文件
2. 组件未注册：检查是否完整引入或按需引入
3. 数据不更新：使用响应式API或强制刷新

【免费下载链接】avue 🔥Avue.js是基于现有的element-plus库进行的二次封装，简化一些繁琐的操作，核心理念为数据驱动视图,主要的组件库针对table表格和form表单场景，同时衍生出更多企业常用的组件，达到高复用，容易维护和扩展的框架，同时内置了丰富了数据展示组件，让开发变得更加容易。 项目地址: https://gitcode.com/superwei/avue