vue api 网站前端开发实战（Avue-更加贴合企业开发的数据驱动前端开发框架）
vue api 网站前端开发实战（Avue-更加贴合企业开发的数据驱动前端开发框架）# 安装 Vue Cli npm install -g @vue/cli # 创建一个项目 vue create hello-world # 创建完成后，可以通过命令打开图形化界面，如下图所示 vue ui 在图形化界面中，点击 依赖 -> 安装依赖，然后将 @smallwei/avue 添加到依赖中即可。在引入 Avue 时，可以传入一个全局配置对象。该对象目前支持：<!-- 引入样式文件 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@smallwei/avue/lib/index.css" /> <link rel="stylesheet" href="https://unpkg.com/e
Vue 作为最为广泛使用的前端开发框架之一，拥有许多的组件库，但他们通常提供较为基本的组件，应用到业务上往往还需要大量的封装。Avue，基于 element-ui / element-plus，提供了数据驱动视图的二次封装，目标是简化开发工作。
Avue，是 smallweigit 在 Gitee 上开源的基于 Vue 的前端开发框架，仓库位于 https://gitee.com/smallweigit/avue，目前提供了基于 Vue 2.x 的 v2.9.4 版本和基于 Vue 3.x 的 v3.0.4 版本。
Avue 基于 Vue，2.x 版本基于 Vue 2 的 element-ui 组件库，3.x 版本基于 Vue 3 的 element-plus 组件库。Avue 基于现有的组件库进行了二次封装，从而简化一些繁琐的操作，核心理念为数据驱动视图，主要的组件库针对 table 表格和 form 表单场景，同时衍生出更多企业常用的组件，达到高复用，容易维护和扩展的框架，同时内置了丰富了数据展示组件，让开发变得更加容易。
Avue 易用灵活，对于已掌握 Vue element-ui / element-plus 的开发者而言，能够马上上手使用；拥有丰富组件，包含了大量的常用组件库以及插件库；Avue 高效兼容，兼容现在主流的浏览器，使用开箱即用的插件引入模式。
在现有项目中使用 Avue 时，可以通过 npm 或 yarn 进行安装：
# 安装
npm i @smallwei/avue -S
yarn add @smallwei/avue -S
# 引入
import Avue from '@smallwei/avue';
import '@smallwei/avue/lib/index.css';
Vue.use(Avue);
使用字典需要引入axios：
import axios from 'axios'
Vue.use(Avue {axios})
使用 Avue 最简单的方法是直接在 html 文件中引入 CDN 链接(引入的是最新的Avue版本，当然你也可以制定版本号)，之后你可以通过全局变量 AVUE 访问到所有组件:
<!-- 引入样式文件 -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@smallwei/avue/lib/index.css"
/>
<link
rel="stylesheet"
href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
/>
<!-- 引入相关JS 文件 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@smallwei/avue/lib/avue.min.js"></script>
<div id="app"></div>
<script>
// 在 #app 标签下渲染一个按钮组件
new Vue({
el:'app'
data(){
return{}
}
});
app.use(AVUE);
</script>
在新项目中使用 Avue 时，推荐使用 Vue 官方提供的脚手架 Vue Cli 创建项目并安装 Avue：
# 安装 Vue Cli
npm install -g @vue/cli
# 创建一个项目
vue create hello-world
# 创建完成后，可以通过命令打开图形化界面，如下图所示
vue ui
在图形化界面中，点击 依赖 -> 安装依赖，然后将 @smallwei/avue 添加到依赖中即可。
在引入 Avue 时，可以传入一个全局配置对象。该对象目前支持：
- size：用于改变组件的默认尺寸，属性的组件的默认尺寸均为 small。可选值small/mini/medium;
- menuType：用于改变操作栏菜单按钮类型性，属性的组件的默认尺寸均为 text。可选值button/icon/text/menu
- theme 主题颜色配置，属性的组件的默认白色。可选值 dark;
- qiniu 七牛云配置
- ali 阿里云配置
- canvas全局水印配置
Avue 提供了大量的二次封装组件，能够很方便地应用到业务中，如 inputTree 树型输入组件：
数组输入组件，能够动态输入多个元素：
Avue 还提供了强大的组合组件，如 Form 表单组件：
其提供了如数据验证、数据字典、数据类型、数据过滤、防重提交等高级特性：
<avue-form v-model="form" :option="option" ></avue-form>
<script>
export default {
data() {
return {
form: {
cascader:[0 1]
tree:0
}
option:{
column:[{
...
}]
}
}
}
</script>
Avue 基于 Vue 2 的 element-ui 组件库和 Vue 3 的 element-plus 组件库，进行了二次封装，从而简化一些繁琐的操作，核心理念为数据驱动视图，衍生出更多企业常用的组件，高复用，容易维护和扩展的框架，内置了丰富了数据展示组件，大大简化了开发工作。
