工作中台基础UI

项目介绍

简洁的中台UI，vuejs 开发，组件化，模块化。提供基础中台样式，帮助开发者直接复用该项目。

先来波图

预览

预览地址

预览部署在 Github Page ，如果您访问时由于网络原因卡在载入界面或者白屏，请克隆或者下载本仓库在本地运行查看效果。

软件架构

• vue/cli3
• vue 2.5.17
• vue-router 3.0.1
• vuex 3.0.1
• vuex-router-sync 5.0.5
• vue-i18n 8.1.0
• numeral 2.0.6
• axios 0.18.0
• ant-design-vue 1.1.2 组件库
• antv/g2 3.2.7 图表库

安装教程

npm install

运行包含热加载的开发环境

npm run serve

打包压缩后的生产文件

npm run build

本地如何运行打包后的生产文件

npm install serve -g  安装serve服务 -g 安装到全局

serve -s dist 运行打包后的生产文件 dist 打包后的文件夹

Lints and fixes files

npm run lint

使用说明

1. 运行文件配置 vue.config.js

   
   // 基础路径 注意发布之前要先修改这里
   const baseUrl = '/'
   if (process.env.NODE_ENV === 'production') {
   baseUrl = '/seed-workbench-ui/'
   }

// 主题样式全局修改替换 css: { loaderOptions: { less: { modifyVars: { 'ai-prefix': 'ai', 'primary-color': '#42b983' }, paths: [ resolve('node_modules'), resolve('src') ], javascriptEnabled: true } } }

// 过滤掉moment其它国家，只保留中文和英文 configureWebpack: { plugins: [ new webpack.ContextReplacementPlugin(/moment[\/]locale$/, /^.\/(zh-cn|en-us)$/), ] }

// 配置本地svg优化方案 ，重新设置src别名@ chainWebpack: config => { const svgRule = config.module.rule('svg') svgRule.uses.clear() svgRule .include .add(resolve('src/assets/svg-icons')) .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'ai-[name]' }) .end() // image exclude const imagesRule = config.module.rule('images') imagesRule .test(/.(png|jpe?g|gif|webp|svg)(\?.*)?$/) .exclude .add(resolve('src/assets/svg-icons')) .end() // 重新设置 alias config.resolve.alias.set('@', resolve('src')) }

2. 编译文件配置 [babel.config.js](https://github.com/ruyangit/seed-workbench-ui/blob/dev/babel.config.js)

// 设置ant-design-vue 按需加载方案 "plugins": [ ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": true }] ]

3. 组件及页面API说明待后续时间充裕补充上来。

#### 计划
* 后续完善UI中所需的组件
* 对接完成自己开发的后台系统[nest搭建，暂时在开发中]
* 关于阿里的g2 或者百度的 echarts 对于我来说感觉有点大，之后看看图表相关的简化一下
* 代码的规范及API文档的编写
* 代码的CI，CD测试

#### 参与贡献

1. Fork 本项目
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request