Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
InJoyU
vue-element-admin
提交
308b5f61
V
vue-element-admin
项目概览
InJoyU
/
vue-element-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
5
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue-element-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
308b5f61
编写于
4月 25, 2017
作者:
P
Pan
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
refine
上级
20f1d547
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
109 addition
and
41 deletion
+109
-41
README.md
README.md
+74
-38
src/assets/iconfont/iconfont.js
src/assets/iconfont/iconfont.js
+6
-0
src/router/index.js
src/router/index.js
+13
-2
src/views/introduction/index.vue
src/views/introduction/index.vue
+15
-0
src/views/theme/index.vue
src/views/theme/index.vue
+1
-1
未找到文件。
README.md
浏览文件 @
308b5f61
##vue-element-admin
vue+element+axios 的管理后台
[
线上地址
](
http://panjiachen.github.io/vue-element-admin
)
这半年来一直在用vue写管理后台,目前后台已经有七十多个页面,十几种权限,但维护成本依然很低,效率依然很高。这半年来积累了不少的后台开发经验,所以准备开源分享一下。
##
#
功能
-
[x]
登录/注销
-
[x]
权限验证
-
[x]
侧边栏
-
[x]
面包屑
-
[x]
富文本编辑器
-
[x]
Markdown编辑器
-
[x]
JSON编辑器
-
[x]
列表拖拽
-
[x] S
plitPane
-
[x]
Dropzone
-
[x]
Sticky
-
[x]
CountTo
-
[x]
echarts图表
-
[x]
401,401错误页面
-
[x]
错误日志
-
[x]
导出excel
-
[x]
table example
-
[x]
form example
-
[x]
多环境发布
-
[x]
dashboard
-
[x]
二次登录
-
[x]
动态侧边栏
-
[x] mock
##
#
开发
[
线上地址
](
http://panjiachen.github.io/vue-element-admin
)
## 前言
> 这半年来一直在用vue写管理后台,目前后台已经有七十多个页面,十几种权限,但维护成本依然很低,效率依然很高,所以准备开源分享一下后台开发的经验和成果。目前的技术栈主要的采用vue+element+axios.由于是个人项目,所以数据请求都是用了mockjs代替。会出一系列的教程配套文章,如如何从零构建后台项目框架,如何做完整的用户系统(如权限验证,二次登录等),如何二次开发组件(如富文本),如何整合七牛等等文章,各种后台开发经验等等。莫急~~
## 功能
-
登录/注销
-
权限验证
-
侧边栏
-
面包屑
-
富文本编辑器
-
Markdown编辑器
-
JSON编辑器
-
列表拖拽
-
plitPane
-
Dropzone
-
Sticky
-
CountTo
-
echarts图表
-
401,401错误页面
-
错误日志
-
导出excel
-
table example
-
form example
-
多环境发布
-
dashboard
-
二次登录
-
动态侧边栏
-
mock数据
## 开发
```
bash
# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git
git clone https://github.com/PanJiaChen/vue-element-admin.git
# 安装依赖
npm
install
# 本地开发 开启服务
,浏览器访问 http://localhost:9527
# 本地开发 开启服务
npm run build
```
### 发布
浏览器访问 http://localhost:9527
## 发布
```
bash
# 发布测试环境 带webpack ananalyzer
npm run build:sit-preview
# 构建生成环境
npm run build:prod
```
## 目录结构
```
shell
├── build // 构建相关
├── config // 配置相关
├── src // 源代码
│ ├── api // 所以请求
│ ├── assets // 主题 字体等静态资源
│ ├── components // 全局公用组件
│ ├── directive // 全局指令
│ ├── filtres // 全局filter
│ ├── mock // mock数据
│ ├── router // 路由
│ ├── store // 全局store管理
│ ├── styles // 全局样式
│ ├── utils // 全局公用方法
│ ├── view // view
│ ├── App.vue // 入口页面
│ └── main.js // 入口 加载组件 初始化等
├── static // 第三方不打包资源
│ ├── jquery
│ └── Tinymce // 富文本
├── .babelrc // babel-loader 配置
├── eslintrc.js // eslint 配置项
├── .gitignore // git 忽略项
├── favicon.ico // favicon图标
├── index.html // html模板
└── package.json // package.json
```
## 状态管理
后台只有user和app配置相关状态使用vuex存在全局,其它数据都由每个业务页面自己管理。
## 效果图
#### 两步验证登录 支持微信和qq
...
...
src/assets/iconfont/iconfont.js
浏览文件 @
308b5f61
...
...
@@ -38,6 +38,12 @@
''
+
'
</symbol>
'
+
''
+
'
<symbol id="icon-xinrenzhinan" viewBox="0 0 1024 1024">
'
+
''
+
'
<path d="M780.108 761.059c54.451 60.351 87.706 138.983 87.706 225.358 0 12.015-0.659 23.882-1.902 35.581l-71.955 0c1.589-11.675 2.695-23.493 2.695-35.581 0-71.578-29.094-136.386-76.189-185.002C658.778 836.02 587.76 855.95 512 855.95c-75.689 0-146.65-19.888-208.294-54.432-47.129 48.604-76.358 113.305-76.358 184.9 0 12.088 1.105 23.906 2.695 35.581l-71.955 0c-1.243-11.699-1.902-23.567-1.902-35.581 0-86.366 33.19-165.055 87.587-225.446-96.765-78.277-158.75-197.84-158.75-331.998C85.023 193.163 276.188 2.001 512 2.001s426.977 191.162 426.977 426.972C938.977 563.184 876.94 682.785 780.108 761.059zM512 295.787c-196.511 0-355.814-80.302-355.814 122.251 0 202.551 159.303 366.749 355.814 366.749s355.814-164.199 355.814-366.749C867.814 215.485 708.511 295.787 512 295.787zM678.047 500.136c-26.2 0-47.442-21.24-47.442-47.442 0-26.197 21.242-47.442 47.442-47.442 26.202 0 47.442 21.244 47.442 47.442C725.488 478.896 704.249 500.136 678.047 500.136zM654.326 630.601c0 32.754-63.722 59.302-142.326 59.302s-142.326-26.549-142.326-59.302c0-8.445 4.376-16.446 12.017-23.719 21.98 20.927 71.979 35.579 130.309 35.579s108.329-14.652 130.309-35.579C649.949 614.155 654.326 622.156 654.326 630.601zM345.953 500.136c-26.202 0-47.442-21.24-47.442-47.442 0-26.197 21.24-47.442 47.442-47.442 26.2 0 47.442 21.244 47.442 47.442C393.395 478.896 372.153 500.136 345.953 500.136z" ></path>
'
+
''
+
'
</symbol>
'
+
''
+
'
<symbol id="icon-theme" viewBox="0 0 1024 1024">
'
+
''
+
'
<path d="M788.00002 159.831491C756.00002 128 746 128 724.3801 128L642 128C642 128 576 188.923077 512 188.923077 448 188.923077 384 128 384 128L299.204802 128C276.629934 128 266 140.923077 245.847214 159.831491L81.582979 323.871735C70.243732 335.19552 52 371.692308 81.582979 408.655004 81.582979 408.655004 224.023667 540.29784 238.000003 541.53846L238.000003 835.076924C238.000003 868.452352 286.579 896 320 896L706 896C739.419808 896 788.00002 868.452352 788.00002 835.076924L788.00002 541.53846C802.145492 540.385864 942.448564 408.654992 942.448564 408.654992 974.00002 372 965.851264 334.883878 942.448584 311.513109L788.00002 159.831491Z" ></path>
'
+
...
...
src/router/index.js
浏览文件 @
308b5f61
...
...
@@ -18,6 +18,9 @@ import authRedirect from '../views/login/authredirect';
import
sendPWD
from
'
../views/login/sendpwd
'
;
import
reset
from
'
../views/login/reset
'
;
/* Introduction*/
const
Introduction
=
resolve
=>
require
([
'
../views/introduction/index
'
],
resolve
);
/* components*/
const
componentsIndex
=
resolve
=>
require
([
'
../views/components/index
'
],
resolve
);
const
Tinymce
=
resolve
=>
require
([
'
../views/components/tinymce
'
],
resolve
);
...
...
@@ -84,11 +87,19 @@ export default new Router({
redirect
:
'
/dashboard
'
,
name
:
'
首页
'
,
hidden
:
true
,
children
:
[{
path
:
'
dashboard
'
,
component
:
dashboard
}]
},
{
path
:
'
/introduction
'
,
component
:
Layout
,
redirect
:
'
/introduction/index
'
,
name
:
'
简述
'
,
icon
:
'
xinrenzhinan
'
,
noDropdown
:
true
,
children
:
[
{
path
:
'
dashboard
'
,
component
:
dashboard
}
{
path
:
'
index
'
,
component
:
Introduction
,
name
:
'
简述
'
}
]
},
{
path
:
'
/permission
'
,
component
:
Layout
,
...
...
src/views/introduction/index.vue
0 → 100644
浏览文件 @
308b5f61
<
template
>
<div
class=
"app-container"
>
<div
class=
"wrapper"
>
<code>
这半年来一直在用vue写管理后台,目前后台已经有七十多个页面,十几种权限,但维护成本依然很低,效率依然很高,所以准备开源分享一下后台开发的经验和成果。目前的技术栈主要的采用vue+element+axios.由于是个人项目,所以数据请求都是用了mockjs代替。会出一系列的教程配套文章,如如何从零构建后台项目框架,如何做完整的用户系统(如权限验证,二次登录等),如何二次开发组件(如富文本),如何整合七牛等等文章,各种后台开发经验等等。莫急~~
</code>
</div>
</div>
</
template
>
<
style
scoped
>
.wrapper
{
width
:
800px
;
margin
:
30px
auto
;
}
</
style
>
src/views/theme/index.vue
浏览文件 @
308b5f61
...
...
@@ -24,7 +24,7 @@
</div>
<div
class=
"block"
>
<el-tag
class=
'tag-item'
v-for=
"tag in tags"
:type=
"tag.type"
>
<el-tag
class=
'tag-item'
v-for=
"tag in tags"
:type=
"tag.type"
:key=
'tag.type'
>
{{
tag
.
name
}}
</el-tag>
</div>
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录