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-chart
< 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
محرر نص منسق لـ Vue2 استنادًا إلى Quill. عنوان الوصول: vue-quill-editor
مكون محرر Markdown لـ Vue.js. عنوان الزيارة: Vue-SimpleMDE
مكون إضافي خفيف الوزن لتحميل vue يدعم الاقتصاص. عنوان الوصول: Vue-Core-Image-Upload
على سبيل المثال، إذا كنت لا أرغب في استخدام مكون vue-datasource، فأنا بحاجة إلى القيام بذلك في أربع خطوات.
الخطوة 1: احذف مسار المكون في الدليل src/router/index.js، ابحث عن المسار الذي قدم المكون المعدل واحذف الكود التالي.
{
path : '/vuetable' ,
component : resolve => require ( [ '../components/page/VueTable.vue' ] , resolve ) // vue-datasource组件
} ,الخطوة 2: احذف الملف الذي يقدم المكون. احذف ملف VueTable.vue الموجود في الدليل src/components/page/.
الخطوة 3: حذف الإدخال إلى هذه الصفحة. في الدليل src/components/common/Sidebar.vue، ابحث عن الإدخال واحذف الكود التالي.
< el-menu-item index =" vuetable " > Vue表格组件</ el-menu-item >الخطوة 4: قم بإلغاء تثبيت المكون. قم بتنفيذ الأمر التالي:
npm un vue-datasource -S
ينهي.
الخطوة الأولى: افتح ملف 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/components/common/Sidebar.vue، وابحث عن علامة القائمة el، وقم بإزالة theme = "dark".
