refine
This commit is contained in:
parent
9cd68d95ee
commit
b3e1b6c824
5 changed files with 57 additions and 11 deletions
38
README.md
38
README.md
|
@ -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] 401,401错误页面
|
||||
- [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
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue