【限时免费】 Avue.js 技术文档

Avue.js 技术文档

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

1. 安装指南

环境要求

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

安装方式

使用 pnpm 安装（推荐）

pnpm add @smallwei/avue

使用 npm 安装

npm install @smallwei/avue

使用 yarn 安装

yarn add @smallwei/avue

文件说明

2. 项目使用说明

完整引入方式

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')

按需引入

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

3. 项目API使用文档

AvueCrud 表格组件

const option = {
  column: [
    {
      label: "姓名",
      prop: "name",
      rules: [{ required: true, message: "请输入姓名" }]
    },
    {
      label: "年龄",
      prop: "age",
      type: "number"
    }
  ]
}

AvueForm 表单组件

const formOption = {
  column: [
    {
      label: "用户名",
      prop: "username",
      span: 12
    },
    {
      label: "密码",
      prop: "password",
      type: "password",
      span: 12
    }
  ]
}

常用配置项

4. 项目安装方式详解

完整安装流程

1. 创建Vue项目

npm init vue@latest

2. 安装Element Plus

npm install element-plus

3. 安装Avue

npm install @smallwei/avue

4. 在main.js中配置

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import Avue from '@smallwei/avue'
import '@smallwei/avue/dist/avue.css'

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

注意事项

1. 确保项目中已安装Vue 3.x和Element Plus 2.x
2. 生产环境建议使用avue.min.js
3. 开发环境可使用avue.js获取完整调试信息
4. 样式文件必须单独引入

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