工作中台基础UI
项目介绍
SeedWorkbenchUi 简洁的中台UI，vuejs 开发，组件化，模块化 See: demo
先来波图
预览
预览部署在 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按需引入
- 安装element-ui
npm i element-ui -S- 安装按需引入必要插件
npm install babel-plugin-component -D- 修改.babelrc 如果是vueCli3 则修改babel.config.js
module.exports = {
presets: ["@vue/app"],
plugins: [
// element官方教程
[
"component",
{
libraryName: "element-ui",
styleLibraryName: "theme-chalk"
}
]
]
};- 在src目录下新建一个文件夹element，在该目录下新建Index.js，填写如下内容：
import {
Select,
Option,
OptionGroup,
Input,
InputNumber,
Radio,
Tree,
Dialog,
Row,
Col,
Checkbox,
CheckboxButton,
CheckboxGroup,
Cascader,
Switch,
Slider,
TimeSelect,
TimePicker,
DatePicker,
Upload,
Rate,
ColorPicker,
Transfer,
Form,
FormItem,
Table,
TableColumn,
Tag,
Button,
Progress,
Pagination,
Badge,
Avatar,
Alert,
Loading,
Message,
MessageBox,
Notification,
Menu,
MenuItemGroup,
MenuItem,
Submenu,
RadioGroup,
RadioButton
} from 'element-ui'
const element = {
install: function(Vue) {
Vue.use(Select)
Vue.use(Option)
Vue.use(OptionGroup)
Vue.use(Input)
Vue.use(InputNumber)
Vue.use(Radio)
Vue.use(Tree)
Vue.use(Dialog)
Vue.use(Row)
Vue.use(Col)
Vue.use(Checkbox)
Vue.use(CheckboxButton)
Vue.use(CheckboxGroup)
Vue.use(Cascader)
Vue.use(Switch)
Vue.use(Slider)
Vue.use(TimePicker)
Vue.use(TimeSelect)
Vue.use(DatePicker)
Vue.use(Upload)
Vue.use(Rate)
Vue.use(ColorPicker)
Vue.use(Transfer)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Tag)
Vue.use(Button)
Vue.use(Progress)
Vue.use(Pagination)
Vue.use(Badge)
Vue.use(Avatar)
Vue.use(Alert)
Vue.use(Loading)
Vue.use(Menu)
Vue.use(MenuItem)
Vue.use(MenuItemGroup)
Vue.use(Submenu)
Vue.use(RadioGroup)
Vue.use(RadioButton)
Vue.prototype.$message = Message;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$notify = Notification;
}
}
export default element- 在main.js中写入
import 'element-ui/lib/theme-chalk/index.css'
import element from './element/index'
Vue.use(element)使用说明
- 运行文件配置 vue.config.js
// 基础路径 注意发布之前要先修改这里
const baseUrl = '/'
if (process.env.NODE_ENV === 'production') {
baseUrl = '/frontend/'
}
// 主题样式全局修改替换
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'))
}- 编译文件配置 babel.config.js
// 设置ant-design-vue 按需加载方案
"plugins": [
["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": true }]
]- 组件及页面API说明待后续时间充裕补充上来。
计划
- 后续完善UI中所需的组件
- 对接完成自己开发的后台系统 SpringbootSeed
- 关于阿里的g2 或者百度的 echarts 对于我来说感觉有点大，之后看看图表相关的简化一下
- 代码的规范及API文档的编写
- 代码的CI，CD测试
参与贡献
- Fork 本项目
- 新建 Feat_xxx 分支
- 提交代码
- 新建 Pull Request