Avue引入项目

一. 介绍

Avue 是一个基于Element框架 (opens new window)低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率

官网：介绍 | Avue

二. 引入

1. 首先他是基于 elementUI 的二次开发，所以首先我们需要引入 elementUI

npm i element-ui -S

2. 需要引入 axios

npm i axios -S

3. 需要引入 http

npm i -S stream-http

4. 在引入 Avue

npm i @smallwei/avue@latest-v2 -S

5. 在 main.js 当中

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import Avue from '@smallwei/avue';
import '@smallwei/avue/lib/index.css';
Vue.use(ElementUI);
Vue.use(Avue, {
  size: 'small',
  crudOption: {},
  formOption: {},
  tableSize: '',
  formSize: '',
  appendToBody: true,
  modalAppendToBody: true,
  cos: {},
  qiniu: {},
  ali: {},
  canvas: {},
});

6. 在 vue.config.js 当中

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: "./",

  configureWebpack() {
    return {
      resolve: {
        fallback: {
          http: require.resolve("stream-http"),
        },
      },
    }
  },
})

这样我们的 Avue 就算引入成功了

页面里写上

效果

搞定！