Напишите vue как easyUI - компоненты фоновой интеграции avue

внешний интерфейс JavaScript Vue.js

avue1.0 выпущен! ! ! Добро пожаловать, чтобы щелкнуть демонстрационный адрес, чтобы испытать

Демонстрационный адрес:http://122.4.205.228:7777--jenkins+docker+git hook автоматическое развертывание

Адрес облака кода:git ee.com/small для git…

адрес гитхаба:GitHub.com/Нанман Полковник/Ах…

Введение

avueЭто программа, похожая на easyui, для написания vue, которая поддерживает SSR (рендеринг на стороне сервера) и SPA (страница с одним экземпляром), все они основаны на json, настраиваемых для разработки интерфейса, снижения затрат на разработку и повышения эффективности разработки, базовая композиция состоит изVue.jsа такжеelement. Он использует новейший стек передовых технологий, проверку разрешений, вложение сторонних веб-сайтов и другие функции, многие функции все еще находятся в стадии разработки, так что следите за обновлениями.

1.vuex本地持久化存储,封装h5的sessionStorage和localStorage

2.加入了本地离线的包引入方法去引入vue，vue-router等第三方包 Подробное введение

3.支持SSR服务端渲染(express)vue-server-renderer

4.支持阿里巴巴图标库在线调用，自动同步图标 Библиотека иконок Alibaba

5.支持iframe嵌套第三方网站Подробное введение

6.支持js动态可配CRUD和FORM,节约大量开发成本，配置字典接口自动匹配字典

7.支持多种登录方式,本地验证码校验和服务端验证码校验

8.全局错误日志记录

9.scss模块化开发

10.增加系统管理模板(用户管理,角色管理,菜单管理——基于本框架的crud组件自动生成)

11.打包后docker一键部署脚本基于nginx镜像（具体的可以修改./src/docker/Dockerfile）

Поддержка маршрутизации для изменения заголовка одноэлементной страницы

Динамическое переключение разрешений

пример

Авторизоваться

тестовая страница разрешений

Отображение данных

страница ошибки

регистрация ошибок

CRUD

FORM

Управление пользователями

управление ролями

Настройки меню

Библиотека иконок Alibaba (онлайн-вызов)

Страница входа SSR рендеринг

Дома

Сторонние сайты

Функция

- 全局错误日志记录
- vuex持久化存储
- 锁屏
- SSR渲染页面
- 数据展示
- 登录/注销
 - 用户名登录
 - 验证码登录
 - 第三方登录(开发中)
- 权限验证
- 第三方网站嵌套
- CRUD(增删改查)
- FORM(动态生成)
- 阿里巴巴图标库(在线调用)
- 系统管理
 - 用户管理
 - 角色管理
 - 菜单管理
- 更多功能开在开发

Отображение и скрытие управления кнопками

Массив разрешений в возвращенном объекте vue включает разрешения кнопки. Например: ['sys_crud_add', 'sys_crud_export'], кнопка добавления crud и кнопка экспорта

Глобальное ведение журнала ошибок

Выпустите компонент errorA в ./src/page/errlog/index.vue, чтобы проверить, что он хранится локально, вы можете вернуть метод, чтобы загрузить сервер самостоятельно, и вызвать метод CLEAR_ALL_ERR, чтобы очистить локальный

См. демонстрацию постоянного хранилища Vuex.

Подробную демонстрацию см. в примере ./src/store/modules/tgs.js.

...
state:{
  ...
  tag: getStore({ name: 'tag' }) || tagObj
},
...
 mutations: {
  ...
  setStore({ name: 'tagList', content: state.tagList, type: 'session' })
  ...
 }

Класс инструмента шифрования данных — шифрование в ./src/util/util.js

Поддержка шифрования Base64 и Aes

const data ={
  username:'admin',
  password:'123456'
}
const userInfo = encryption({
    data: data,//加密的数据
    key:'123',//aes加密时的类型，不是aes加密不用传
    type: 'Base64',//要加密的类型 Base64 || Aes
    param: ['useranme', 'password'] //要加密的字段
});

Инструкции по использованию CRUD и FORM. Автоматически сгенерируйте CRUD и FORM в соответствии с файлом конфигурации json и настройте интерфейс словаря для автоматического сопоставления со словарем.

Подробную демонстрацию см. в ./src/page/table/index.vue и экземпляре ./src/page/form/index.vue.

子定义操作按钮<br />
<template slot-scope="scope">
    <el-button icon="el-icon-check" size="small" @click="handleGrade(scope.row,scope.$index)">权限</el-button>
</template>
js自动配置crud<br />
{
  border: true,//表格是否显示边框
  index: true,///表格是否显示序号
  selection: true,//表格是否显示可选select
  dic:['GRADE','SEX'],//传入需要获取字典的变量，看vuex中的getDic方法
  column: [
    {
      label: "用户名",//表格的标题
      prop: "username",//表格的key
      width: "150",//表格的宽度
      fixed: true,//是否冻结列
      hide:true,//是否隐藏
      span:12,//表单格栅显示的列
      type:'select', //select | radio | checkbox | date 默认为text
      visdiplay:true,//表单不显示
      overHidden: true,//超出省略号显示
      dicData: 'GRADE', //传入需要引用的字典
      ],//type的数据字典,当type为：select | radio | checkbox 加载
      dataDetail: val => {
        return `<span class="el-tag">${val}</span>`;;//是否对列表数据处理
      },
      rules: [{ required: true, message: "请输入用户名", trigger: "blur" }] //表单校验规则
    }
}

развивать

# 克隆项目
git clone https://gitee.com/smallweigit/avue.git

# 安装依赖
npm install
   
# 建议不要用cnpm安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org

# 启动服务
npm run dev

Отладка и выпуск

# 构建测试环境
npm run dev

# 构建生成环境
npm run build

# 构建SSR渲染页面
npm run start

разное

# 代码检测
npm run lint

# 单元测试
npm run karma

# 构建SSR客户端代码
npm run build:client

# 构建SSR服务端端代码
npm run build:server

License

MIT

Copyright (c) 2017-present Smallwei QQ:1634566606

Категории