webAdmin
1.0.0
Vue.js 2.x 시리즈 + Element UI 기반의 백엔드 관리 시스템 솔루션입니다. 온라인 주소
영문 문서
이전에는 Vue + Element 구성 요소 라이브러리를 사용하여 백엔드 관리 시스템을 구축했습니다. 기본적으로 많은 구성 요소가 구성 요소 라이브러리를 직접 참조할 수 있지만 충족할 수 없는 요구 사항도 있습니다. 이미지 자르기 및 업로드, 서식 있는 텍스트 편집기, 차트 등과 같은 백엔드 관리 시스템에서 매우 일반적인 기능을 완료하려면 다른 구성 요소를 참조해야 합니다. 부품을 찾는 것부터 사용하는 것까지 많은 어려움을 겪으며 귀중한 경험을 쌓았습니다. 그래서 이 백엔드 관리 시스템을 이 백엔드 관리 시스템 솔루션으로 개발한 경험을 요약했습니다.
다기능 백엔드 프레임워크 템플릿 세트인 이 솔루션은 대부분의 백엔드 관리 시스템(웹 관리 시스템) 개발에 적합합니다. vue.js를 기반으로 vue-cli 스캐폴딩을 사용하여 프로젝트 디렉터리를 빠르게 생성하고 Element UI 구성 요소 라이브러리를 참조하여 빠르고 간결하며 아름다운 구성 요소를 쉽게 개발할 수 있습니다. 색상 스타일을 분리하고 테마 색상의 수동 전환을 지원하며 사용자 정의 테마 색상을 사용하는 것이 매우 편리합니다.
|-- build // webpack配置文件
|-- config // 项目打包路径
|-- src // 源码目录
| |-- components // 组件
| |-- common // 公共组件
| |-- Header.vue // 公共头部
| |-- Home.vue // 公共路由入口
| |-- Sidebar.vue // 公共左边栏
| |-- page // 主要路由页面
| |-- BaseCharts.vue // 基础图表
| |-- BaseForm.vue // 基础表单
| |-- BaseTable.vue // 基础表格
| |-- Login.vue // 登录
| |-- Markdown.vue // markdown组件
| |-- Readme.vue // 自述组件
| |-- Upload.vue // 图片上传
| |-- VueEditor.vue // 富文本编辑器
| |-- VueTable.vue // vue表格组件
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件，加载各种公共组件
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 代码编写规格
|-- .gitignore // 忽略的文件
|-- index.html // 入口html文件
|-- package.json // 项目及工具的依赖配置文件
|-- README.md // 说明
git clone https://github.com/lin-xin/manage-system.git // 把模板下载到本地
cd manage-system // 进入模板目录
npm install // 安装项目依赖，等待安装完成之后
// 开启服务器，浏览器访问 http://localhost:8080
npm run dev
// 执行构建命令，生成的dist文件夹放在服务器下即可访问
npm run build
vue.js는 sChart.js의 차트 구성 요소를 캡슐화합니다. 방문 주소: vue-schart
< template >
< div >
< schart : canvasId = " canvasId "
: type = "type"
: width = "width"
: height = "height"
: data = "data"
: options = "options"
> </ schart >
</ div >
</ template >
< script >
import Schart from 'vue-schart' ; // 导入Schart组件
export default {
data : function ( ) {
return {
canvasId : 'myCanvas' , // canvas的id
type : 'bar' , // 图表类型
width : 500 ,
height : 400 ,
data : [
{ name : '2014' , value : 1342 } ,
{ name : '2015' , value : 2123 } ,
{ name : '2016' , value : 1654 } ,
{ name : '2017' , value : 1795 } ,
] ,
options : { // 图表可选参数
title : 'Total sales of stores in recent years'
}
}
} ,
components : {
Schart
}
}
< / script>vue.js2.0을 기반으로 하는 데스크톱 구성 요소 라이브러리 세트입니다. 방문 주소: 요소
테이블을 동적으로 생성하기 위한 vue.js 서버 측 구성 요소입니다. 액세스 주소: vue-datasource
Quill을 기반으로 하는 Vue2용 리치 텍스트 편집기입니다. 액세스 주소: vue-quill-editor
Vue.js용 마크다운 편집기 구성 요소입니다. 방문 주소: Vue-SimpleMDE
자르기를 지원하는 경량 vue 업로드 플러그인입니다. 액세스 주소: Vue-Core-Image-Upload
예를 들어 vue-datasource 구성 요소를 사용하지 않으려면 4단계를 거쳐야 합니다.
1단계: 구성 요소의 경로를 삭제합니다. src/router/index.js 디렉터리에서 수정된 구성 요소를 도입한 경로를 찾아 다음 코드를 삭제합니다.
{
path : '/vuetable' ,
component : resolve => require ( [ '../components/page/VueTable.vue' ] , resolve ) // vue-datasource组件
} ,2단계: 구성 요소를 소개하는 파일을 삭제합니다. src/comComponents/page/ 디렉터리에서 VueTable.vue 파일을 삭제합니다.
3단계: 이 페이지의 항목을 삭제합니다. src/comComponents/common/Sidebar.vue 디렉터리에서 해당 항목을 찾아 다음 코드를 삭제합니다.
< el-menu-item index =" vuetable " > Vue表格组件</ el-menu-item >4단계: 구성 요소를 제거합니다. 다음 명령을 실행합니다.
npm un vue-datasource -S
마치다.
1단계: src/main.js 파일을 열고 요소 스타일이 도입된 위치를 찾아 밝은 녹색 테마로 변경합니다.
import 'element-ui/lib/theme-default/index.css' ; // 默认主题
// import '../static/css/theme-green/index.css'; // 浅绿色主题2단계: src/App.vue 파일을 열고 스타일 태그가 스타일을 소개하는 위치를 찾은 다음 밝은 녹색 테마로 전환합니다.
@ import "../static/css/main.css" ;
@ import "../static/css/color-dark.css" ; /*深色主题*/
/*@import "../static/css/theme-green/color-green.css"; !*浅绿色主题*!*/3단계: src/comComponents/common/Sidebar.vue 파일을 열고 el-menu 태그를 찾아 theme="dark"를 제거합니다.
