Avue-vue2

树懒的梦想2023-11-13 17:31

前言

Avue的v2版本是一个基于element-ui低代码前端框架
Avue的v3是一个基于element-plus低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率
Avue对于后台管理系统的开发极其便捷，就是配置不容易记住，熟练该框架配置来开发会好点，不然真不如直接用element来开发的好

Avue-vue2的官网地址

安装

js 复制代码

npm、yarn安装
npm i @smallwei/avue -S
yarn add @smallwei/avue -S
或
CDN在线安装
<!-- 引入样式文件 -->
<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>

引入

通过CDN安装的，会挂载在全局属性AVUE下，通过 Vue.use(AVUE) 注册

js 复制代码

import Avue from '@smallwei/avue';
import '@smallwei/avue/lib/index.css';
Vue.use(Avue);

全局配置

js 复制代码

Vue.use(AVUE,{
  size:'', // 组件的尺寸，默认small。可选值 small/mini/medium
  tableSize:'', // 
  formSize:'', // 
  appendToBody:true, //
  modalAppendToBody:true, // 
  menuType:'', // 用于改变操作栏菜单按钮类型性，属性的组件的默认尺寸均为 text。可选值 button/icon/text/menu
  qiniu:{ // 七牛云配置
    AK: '',
    SK: '',
    scope: '',
    url: '',
    deadline: 1
  },
  ali:{ // 阿里云配置
    region: '',
    endpoint: '',
    accessKeyId: '',
    accessKeySecret: '',
    bucket: '',
  },
  theme:'', // 主题颜色配置，属性的组件的默认白色。可选值 dark
  canvas:{ // 水印配置
    text: 'avuejs.com',
    fontFamily: 'microsoft yahei',
    color: "#999",
    fontSize: 16,
    opacity: 100,
    bottom: 10,
    right: 10,
    ratio: 1
  },
});

国际化

Avue 采用中文作为默认语言，同时支持多语言切换

js 复制代码

import Vue from 'vue'
import Avue from '@smallwei/avue'
import zhLocale from '@smallwei/avue/lib/locale/lang/zh'
import enLocale from '@smallwei/avue/lib/locale/lang/en'

Vue.use(Avue, { enLocale })