前言
经过两个多星期的开发与整理,继我的第一篇原创博客《从C/C++到前端转型之路》后,终于推出了Eagles项目,为什么取名为Eagles呢?Eagles表示雄鹰,就像神雕侠侣中雕兄展翅战胜蟒蛇一样。本项目采用vue+axios+elementui技术,集成了vuex状态管理,vue-awesome字体图标库,vue-i18n国际化,mockjs模拟api数据提交,支持sass样式编译。开发了非常适合项目的低耦合组件,如:树表、拓扑图、表格、图表等,还附加菜单管理、角色权限管理、用户管理等通用项目模块。
后台技术栈暂时采用mockjs模拟Ajax数据提交,后面会用spring boot+mybatis技术给大家娓娓道来。最近也在研究spring cloud与docker微服务架构实战,后面也会有相应文章给大家分享,共同进步!
方便大家交流,已开QQ群,613176270,欢迎大家畅所欲言,温馨提示:群里有妹子哟!
功能
- 登录/注销
- token验证
- 不同风格菜单栏
- 自定义换肤主题
- 国际化支持
- 表格
- 树表
- 拓扑图组件
- 图表
- 右侧弹窗
- 可移动对话框
- 富文本
- Markdown
- JSON美化
- 列表拖拽
- 权限管理
- 日志管理
- 用户管理
- 菜单管理
- 数据管理
- 图形设计器
- 开发/部署两种模式
- mack模拟ajax请求数据
- vuex状态管理模块化
- Ajax请求进度条
- sass样式支持
- 事件中心实现
编译运行
1 | # 克隆项目 |
目录结构说明
1 | |-- build # 编译目录 |
部分截图
首页
换肤&表格
国际化&树表
拓扑图
不同风格菜单
爬坑之路
Jquery组件的正确引用
在package.json中加入jquery1
"jquery": "^1.11.1"
在webpack.base.conf.js后加入如下代码,在之前要引入webpack1
2
3
4
5
6
7
8
9var webpack = require("webpack")
plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
]
在main.js中引入jquery1
import $ from 'jquery'
国际化兼容问题
国际化采用vue-i18n,但是只能使用5.x版本,使用6.x版本会发生和element兼容性问题,导致原声的element无法翻译
和Element兼容国际化引入1
2
3
4
5
6
7
8import enUS from './en-US.json'
import zhCN from './zh-CN.json'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
export const LANGS = {
'en-US': $.extend(enUS, enLocale),
'zh-CN': $.extend(zhCN, zhLocale)
}
nginx部署问题
vue路由热加载组件,会导致部署到Nginx后,组件无法切换的问题(切换失败)
所以如果部署到Nginx,在路由中,只能使用import加载组件
静态资源访问问题
部署到Nginx后,所有静态资源访问出现404(访问失败)
原因:vue中src目录下所有的资源文件都要进行编译转码,原先用引用的静态文件将会出错,如img标签引用的静态图片文件
解决办法:将静态资源放入到和src同级的static目录,并引用此目录下文件,但是重要的一点是:开发模式和生产模式引用的static路径会有不同,于是在配置文件中加入如下代码,来区分开发模式和生产模式:1
export const STATIC_IMAGEPATH = (process.env.NODE_ENV === 'production') ? "./static/img/": "/static/img/";
另外, config/index.js下,assetsPublicPath也是不同1
assetsPublicPath: './', //生产环境assetsPublicPath: '/'
开发模式和部署不是代理后台服务设置
在config/index.js中配置proxyTable1
2
3
4
5
6
7
8
9
10
11
12proxyTable: {
'/ajax': {
target: 'http://127.0.0.1:8080',
// target: 'http://127.0.0.1:8081',
changeOrigin: true,
pathRewrite: {
'^/ajax': '/dirms-service'
},
onProxyReq (proxyReq, req, res) {
}
}
},
在config中加入如下,其中eagles-service为生产模式下的后台服务访问标识1
export const API_BASEURL = (process.env.NODE_ENV === 'production')? "/eagles-service":"/ajax";
todo list
- 完成并完善剩下功能
- 寻找其他NB开源组件并封装,如D3等
- 完善后台项目,并搭建微服务架构
欢迎大家star和issue
QQ群:613176270