99 lines
3.4 KiB
Vue
99 lines
3.4 KiB
Vue
<template>
|
||
<div>
|
||
<div class="crumbs">
|
||
<el-breadcrumb separator="/">
|
||
<el-breadcrumb-item><i class="el-icon-setting"></i> 自述</el-breadcrumb-item>
|
||
</el-breadcrumb>
|
||
</div>
|
||
<div class="ms-doc">
|
||
<h3>README.md</h3>
|
||
<article>
|
||
<h1>manage-system</h1>
|
||
<p>基于Vue.js 2.x系列 + Element UI 的后台管理系统解决方案</p>
|
||
<h2>前言</h2>
|
||
<p>之前在公司用了Vue + Element组件库做了个后台管理系统，基本很多组件可以直接引用组件库的，但是也有一些需求无法满足。像图片裁剪上传、富文本编辑器、图表等这些在后台管理系统中很常见的功能，就需要引用其他的组件才能完成。所以我就把开发这个后台管理系统的经验，总结了这个后台管理系统解决方案。</p>
|
||
<p>该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web Management System）开发。基于vue.js,使用vue-cli脚手架快速生成项目目录，引用Element UI组件库，方便开发快速简洁好看的组件。</p>
|
||
<h2>功能</h2>
|
||
<el-checkbox disabled checked>Element UI</el-checkbox>
|
||
<br>
|
||
<el-checkbox disabled checked>登录/注销</el-checkbox>
|
||
<br>
|
||
<el-checkbox disabled checked>表格</el-checkbox>
|
||
<br>
|
||
<el-checkbox disabled checked>表单</el-checkbox>
|
||
<br>
|
||
<el-checkbox disabled checked>图表</el-checkbox>
|
||
<br>
|
||
<el-checkbox disabled checked>富文本编辑器</el-checkbox>
|
||
<br>
|
||
<el-checkbox disabled checked>markdown编辑器</el-checkbox>
|
||
<br>
|
||
<el-checkbox disabled checked>图片拖拽/裁剪上传</el-checkbox>
|
||
<br>
|
||
|
||
</article>
|
||
</div>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data: function(){
|
||
return {}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.ms-doc{
|
||
width:100%;
|
||
max-width: 980px;
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
|
||
}
|
||
.ms-doc h3{
|
||
padding: 9px 10px 10px;
|
||
margin: 0;
|
||
font-size: 14px;
|
||
line-height: 17px;
|
||
background-color: #f5f5f5;
|
||
border: 1px solid #d8d8d8;
|
||
border-bottom: 0;
|
||
border-radius: 3px 3px 0 0;
|
||
}
|
||
.ms-doc article{
|
||
padding: 45px;
|
||
word-wrap: break-word;
|
||
background-color: #fff;
|
||
border: 1px solid #ddd;
|
||
border-bottom-right-radius: 3px;
|
||
border-bottom-left-radius: 3px;
|
||
}
|
||
.ms-doc article h1{
|
||
font-size:32px;
|
||
padding-bottom: 10px;
|
||
margin-bottom: 15px;
|
||
border-bottom: 1px solid #ddd;
|
||
}
|
||
.ms-doc article h2 {
|
||
margin: 24px 0 16px;
|
||
font-weight: 600;
|
||
line-height: 1.25;
|
||
padding-bottom: 7px;
|
||
font-size: 24px;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
.ms-doc article p{
|
||
margin-bottom: 15px;
|
||
line-height: 1.5;
|
||
}
|
||
.ms-doc article .el-checkbox{
|
||
margin-bottom: 5px;
|
||
}
|
||
</style>
|
||
<style>
|
||
.ms-doc .el-checkbox__input.is-disabled+.el-checkbox__label{
|
||
color: #333;
|
||
cursor: pointer;
|
||
}
|
||
</style> |