This commit is contained in:
Pan 2017-04-24 17:04:40 +08:00
parent 9cd68d95ee
commit b3e1b6c824
5 changed files with 57 additions and 11 deletions

View file

@ -1,6 +1,40 @@
这是一个vue+element+axios+webpack2的管理后台 先占个坑
效果预览
##vue-element-admin
vue+element+axios 的管理后台 [线上地址](http://panjiachen.github.io/vue-element-admin)
这半年来一直在用vue写管理后台目前后台已经有七十多个页面十几种权限但维护成本依然很低效率依然很高。这半年来积累了不少的后台开发经验所以准备开源分享一下。
###功能
- [x] 登录/注销
- [x] 权限验证
- [x] 富文本编辑器
- [x] Markdown编辑器
- [x] JSON编辑器
- [x] 列表拖拽
- [x] SplitPane
- [x] Dropzone
- [x] Sticky
- [x] CountTo
- [x] echarts图表
- [x] 401401错误页面
- [x] 错误日志
- [x] 导出excel
- [x] table example
- [x] form example
- [x] 多环境发布
###How to use?
```bash
git clone https://github.com/PanJiaChen/vue-element-admin.git //克隆项目
npm install //安装依赖
npm run dev //本地开发
// 开启服务器,浏览器访问 http://localhost:9527
npm run build:sit-preview //发布测试环境 带webpack ananalyzer
npm run build:prod //构建生成环境
```
##效果图
#### 两步验证登录 支持微信和qq

View file

@ -73,9 +73,10 @@ a:hover {
code {
background: #eef1f6;
padding: 20px 10px;
padding: 15px 10px;
margin-bottom: 20px;
display: block;
line-height: 36px;
a {
color: #337ab7;
cursor: pointer;

View file

@ -1,5 +1,7 @@
<template>
<div class="components-container" >
介绍
<code>
这里的所有的图表都基于echarts,实例代码来源<a href='http://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all' target='_blank'>gallery</a><br/>其实echarts封装的很好了用vue封装是很简单的事情建议大家自己来封装
</code>
</div>
</template>

View file

@ -1,5 +1,7 @@
<template>
<div class="components-container" >
介绍
<div class="components-container">
<code>这里暂时列出了自己在项目中自己封装和用到的组件如有补充可以提<a href='https://github.com/PanJiaChen/vue-element-admin/issues' target='_blank'>issue</a><br/>
我个人崇尚自己封装组件因为很多组件会和业务后高度的耦合很多时候第三方封装是满足不了需求的如有需要可以看楼主之前写过的一篇<a href='https://segmentfault.com/a/1190000009090836' target='_blank'>文章</a>
</code>
</div>
</template>

View file

@ -1,5 +1,6 @@
<template>
<div class="app-container">
<code>会补动态换肤的教程</code>
<el-card class="box-card">
<div slot="header">
<span style="line-height: 36px;">偏好设置</span>
@ -23,19 +24,19 @@
</div>
<div class="block">
<el-tag v-for="tag in tags" :type="tag.type">
<el-tag class='tag-item' v-for="tag in tags" :type="tag.type">
{{tag.name}}
</el-tag>
</div>
<div class="block">
<el-alert title="成功提示的文案" type="success">
<el-alert class='alert-item' title="成功提示的文案" type="success">
</el-alert>
<el-alert title="消息提示的文案" type="info">
<el-alert class='alert-item' title="消息提示的文案" type="info">
</el-alert>
<el-alert title="警告提示的文案" type="warning">
<el-alert class='alert-item' title="警告提示的文案" type="warning">
</el-alert>
<el-alert title="错误提示的文案" type="error">
<el-alert class='alert-item' title="错误提示的文案" type="error">
</el-alert>
</div>
@ -82,4 +83,10 @@ export default {
.block{
padding: 30px 24px;
}
.alert-item{
margin-bottom: 10px;
}
.tag-item{
margin-right: 15px;
}
</style>