ev-vue-framework

EV Vue Framework

基于Vue 3 + Vite + Ant Design Vue的企业级前端框架

安装

npm install ev-vue-framework

使用方式

1. 全量引入

import { createApp } from 'vue';
import EvFramework from 'ev-vue-framework';
import 'ev-vue-framework/lib/ev-vue-framework.css';

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

2. 按需引入

import { createApp } from 'vue';
import { EvButton, EvInputNumber } from 'ev-vue-framework';
import 'ev-vue-framework/lib/ev-vue-framework.css';

const app = createApp(App);
app.component('ev-button', EvButton);
app.component('ev-input-number', EvInputNumber);
app.mount('#app');

3. 直接在模板中使用组件

<template>
  <div>
    <ev-button type="primary">Primary Button</ev-button>
    <ev-input-number v-model:value="value" :min="1" :max="10"></ev-input-number>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const value = ref(5);
    return {
      value
    }
  }
}
</script>

组件列表

• EvButton - 按钮组件
• EvInputNumber - 数字输入框组件
• EvBreadcrumb - 面包屑组件
• EvCheckboxGroup - 复选框组组件
• EvDescriptions - 描述列表组件
• EvDict - 字典组件
• EvDrawer - 抽屉组件
• EvExport - 导出组件
• EvFormBase - 基础表单组件
• EvFormHeader - 表单头部组件
• EvImport - 导入组件
• EvModal - 模态框组件
• EvRadio - 单选框组件
• EvSearchForm - 搜索表单组件
• EvSelectVehicle - 车辆选择组件
• EvSelect - 选择器组件
• EvTreeSelect - 树选择组件
• EvTree - 树组件
• EvUploadImg - 图片上传组件
• EvUpload - 文件上传组件
• EvVideo - 视频组件

动态引入组件

框架还支持动态引入组件的功能：

import { getComponent, getComponentAsync } from 'ev-vue-framework';

// 同步获取组件
const EvButton = getComponent('ev-button');

// 异步获取组件
getComponentAsync('ev-button').then(component => {
  // 使用组件
});

注意事项

• 使用组件时需要同时引入样式文件：ev-vue-framework/lib/ev-vue-framework.css
• 确保项目中已安装 peer dependencies：Vue 3、Ant Design Vue 等