1
1
# vue-blog
2
2
3
- ![ image] ( https://img.shields.io/badge/vue-2.6.8-green .svg )
4
- ![ image] ( https://img.shields.io/badge/vue--router-3.0.2-green .svg )
5
- ![ image] ( https://img.shields.io/badge/vuex-3.1.0-green .svg )
6
- ![ image] ( https://img.shields.io/badge/element--ui-2.6.1-blue .svg )
3
+ [ ![ image] ( https://img.shields.io/badge/vue-2.6.8-brightgreen .svg )] ( https://github.com/vuejs/vue )
4
+ [ ![ image] ( https://img.shields.io/badge/vue--router-3.0.2-brightgreen .svg )] ( https://github.com/vuejs/vue-router )
5
+ [ ![ image] ( https://img.shields.io/badge/vuex-3.1.0-brightgreen .svg )] ( https://github.com/vuejs/vuex )
6
+ [ ![ image] ( https://img.shields.io/badge/element--ui-2.7.0-9cf .svg )] ( https://github.com/ElemeFE/element )
7
7
8
8
## 简介
9
9
10
- [ vue-blog] ( https://github.com/uncleLian/vue-blog ) 是一个后台管理项目解决方案,它基于 [ vue.js] ( https://github.com/vuejs/vue ) 和 [ element-ui] ( https://github.com/ElemeFE/element ) 。使用了目前主流的前端技术栈,并且扩展和集成了许多后台项目经常用到的功能。如:登录、权限验证、多级路由、富文本、I18n国际化等功能特性。相信不管你需求是什么,本项目都能帮助到你 。
10
+ [ vue-blog] ( https://github.com/uncleLian/vue-blog ) 是基于 [ vue.js] ( https://github.com/vuejs/vue ) ,配合使用 [ element-ui] ( https://github.com/ElemeFE/element ) 组件库的一个前端管理后台集成解决方案。它使用了目前主流的技术栈,提供了丰富的功能组件,它可以帮助你快速搭建企业级中后台产品原型 。
11
11
12
12
- [ 在线访问] ( http://blog.liansixin.win )
13
- - [ 使用文档] ( http ://liansixin.win /vue-blog-book )
13
+ - [ 使用文档] ( https ://unclelian.github.io /vue-blog-docs/ )
14
14
15
- ##### 本项目是后台集成方案,仅供参考,不适合进行二次开发 。
15
+ ##### 注:本项目的定位是后台集成方案,不适合当基础模板来进行二次开发。你可以把它当做工具集,在基础模板上进行开发时,想要什么功能或者组件就去复制过来 。
16
16
17
- - 基础模板建议使用:[ vueBlog-template] ( https://github.com/uncleLian/vueBlog-template )
18
-
19
- ##### 注意:element-ui@2.3.0+ 版本,最低兼容 vue@2.5.0+
17
+ - 基础模板:[ vueBlog-template] ( https://github.com/uncleLian/vueBlog-template )
20
18
21
19
## 前序准备
22
- 你的本地环境需要安装 [ node] ( http://nodejs.cn/ ) 和 [ git] ( https://git-scm.com/ ) ,本项目技术栈基于 [ ES2015+] ( http://es6.ruanyifeng.com/ ) 、[ vue] ( https://cn.vuejs.org ) 、[ vue-router] ( https://router.vuejs.org/zh-cn/ ) 、[ vuex] ( https://vuex.vuejs.org/zh-cn/ ) 和 [ element-ui] ( http://element-cn.eleme.io/#/zh-CN/component/installation ) ,所有的请求数据都使用[ Mock.js] ( http://mockjs.com/ ) 模拟,提前了解和学习这些知识会对使用本项目有很大的帮助。
20
+ 你的本地环境需要安装 [ Node] ( https://nodejs.org/en/ ) 和 [ Git] ( https://git-scm.com/ ) ,本项目技术栈基于 [ ES2015+] ( http://es6.ruanyifeng.com/ ) 、[ vue] ( https://cn.vuejs.org ) 、[ vue-router] ( https://router.vuejs.org/zh-cn/ ) 、[ vuex] ( https://vuex.vuejs.org/zh-cn/ ) 、[ axios] ( https://github.com/axios/axios ) 和 [ element-ui] ( http://element-cn.eleme.io/#/zh-CN/component/installation ) ,所有的请求数据都使用 [ mock.js] ( http://mockjs.com/ ) 模拟,提前了解和学习这些知识会对使用本项目有很大的帮助。
21
+
22
+ ##### 注:[ Node] ( https://nodejs.org/en/ ) 版本推荐 8.11.0+或稳定版,你可以使用 [ nvm] ( https://github.com/creationix/nvm ) 或 [ nvm-windows] ( https://github.com/coreybutler/nvm-windows ) 在同一台电脑中管理多个 Node 版本。
23
23
24
24
如果你是Vue初学者,这里有一些资源可以帮助到你
25
25
26
26
- [ 新手向 Vue 2.0 的建议学习顺序] ( https://zhuanlan.zhihu.com/p/23134551?refer=evanyou )
27
27
- [ ES6入门 阮一峰] ( http://es6.ruanyifeng.com/ )
28
- - [ Vue入门项目 —— echo回声 ] ( https://github.com/uncleLian/vue2-echo )
28
+ - [ Vue入门项目系列 ] ( https://github.com/uncleLian/vue2-echo )
29
29
30
- <img src =" http://poci6sbqi.bkt.clouddn.com/vue-blog.png " width =" 900px " style =" max-width : 100% ;" />
30
+ <img src =" http://poci6sbqi.bkt.clouddn.com/vue-blog.jpg " width =" 900px " style =" max-width : 100% ;" />
31
31
32
32
## 功能
33
-
34
- ``` js
35
- * 登录 / 注销
36
-
37
- * 权限验证
38
- - 页面级权限
39
-
40
- * 多环境
41
- - dev
42
- - sit
43
- - prod
44
-
45
- * 动态侧边栏(根据路由一键配置)
46
- - icon
47
- - title
48
- - login(是否需要登录)
49
- - role(是否需要权限)
50
- - keep(是否缓存页面)
51
- - hidden(不显示该路由)
52
- - open(是否展开子菜单)
53
- - redirectIndex(重定向到第index位子路由)
54
-
55
- * 动态面包屑
56
-
57
- * 错误处理
58
- - 401
59
- - 404
60
- - 错误日志
61
-
62
- * 文件处理
63
- - 导入Excel
64
- - 导出Excel
65
- - 导出Zip
33
+ 功能持续迭代中,欢迎 [ pr] ( https://github.com/uncleLian/vue-blog/pulls ) 和 [ issue] ( https://github.com/uncleLian/vue-blog/issues )
34
+
35
+ ```
36
+ * 核心功能
37
+ - 登录/注销
38
+ - 权限验证
39
+ - 页面级权限
40
+ - 按钮级权限
41
+ - 多环境
42
+ - dev
43
+ - prod
44
+ - stage
45
+ - 动态侧边栏
46
+ - 动态面包屑
47
+ - 错误处理
48
+ - 401
49
+ - 404
50
+ - 错误日志
51
+ - 其他处理
52
+ - axios封装
53
+ - cache封装
54
+ - 页面平滑过渡
55
+ - css预处理器全局变量
56
+ - 包体积优化
57
+ - svg icon / iconfont
66
58
67
59
* 其他扩展
68
- - svg icon / iconfont
60
+ - mock
69
61
- 引导页
70
62
- 图钉
71
63
- 返回顶部
77
69
- 动态换肤
78
70
- 全屏化
79
71
- 国际化多语言
72
+ - 文件处理
73
+ - 导入Excel
74
+ - 导出Excel
75
+ - 导出Zip
76
+ - 拖拽功能
77
+ - 拖拽弹框
78
+ - 拖拽表格
79
+ - 拖拽列表
80
80
81
81
```
82
82
@@ -93,9 +93,9 @@ npm run dev
93
93
```
94
94
## 发布
95
95
96
- ```
96
+ ``` bash
97
97
# 构建测试环境
98
- npm run build:sit
98
+ npm run build:stage
99
99
100
100
# 构建生产环境
101
101
npm run build
@@ -109,9 +109,16 @@ npm run build:report
109
109
110
110
111
111
## 捐赠
112
- 如果你觉得这个项目帮助到了你,你可以请我喝杯饮料表示支持🍹
113
112
114
- <img src =" http://poci6sbqi.bkt.clouddn.com/donate.jpg " width =" 500px " style =" max-width : 100% ;" />
113
+ 如果觉得这个项目帮助到了你,你可以请作者喝杯饮料表示支持 :green_heart :
114
+
115
+ ![ image] ( http://poci6sbqi.bkt.clouddn.com/donate.jpg )
116
+
117
+ ## Browsers support
118
+
119
+ | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera |
120
+ | --------- | --------- | --------- | --------- | --------- |
121
+ | IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions
115
122
116
123
## 交流
117
124
欢迎热爱学习、忠于分享的朋友一起来交流
0 commit comments