时间：2023-04-29 21:09:02 | 来源：网站运营
时间：2023-04-29 21:09:02 来源：网站运营
vue-manage-system:后台管理系统解决方案：基于Vue.js 2.x系列 + Element UI 的后台管理系统解决方案。github地址：lin-xin/manage-system
demo地址：lin-xin.gitee.io/example/work/
在线咨询
git clone https://github.com/lin-xin/manage-system.git // 把模板下载到本地cd manage-system // 进入模板目录npm install // 安装项目依赖，等待安装完成之后// 开启服务器，浏览器访问 http://localhost:8080npm run dev// 执行构建命令，生成的dist文件夹放在服务器下即可访问npm run build<template> <div> <datasource language="en" :table-data="information.data" :columns="columns" :pagination="information.pagination" :actions="actions" v-on:change="changePage" v-on:searching="onSearch"></datasource> </div></template><script> import Datasource from 'vue-datasource'; // 导入quillEditor组件 export default { data: function(){ return { information: { pagination: {...}, // 页码配置 data: [...] }, columns: [...], // 列名配置 actions: [...] // 功能配置 } }, components: { Datasource // 声明组件Datasource }, methods: { changePage(values) {...}, onSearch(searchQuery) {...} } }</script><template> <div> <quill-editor ref="myTextEditor" v-model="content" :config="editorOption"></quill-editor> </div></template><script> import { quillEditor } from 'vue-quill-editor'; // 导入quillEditor组件 export default { data: function(){ return { content: '', // 编辑器的内容 editorOption: { // 编辑器的配置 // something config } } }, components: { quillEditor // 声明组件quillEditor } }</script><template> <div> <markdown-editor v-model="content" :configs="configs" ref="markdownEditor"></markdown-editor> </div></template><script> import { markdownEditor } from 'vue-simplemde'; // 导入markdownEditor组件 export default { data: function(){ return { content:'', // markdown编辑器内容 configs: { // markdown编辑器配置参数 status: false, // 禁用底部状态栏 initialValue: 'Hello BBK', // 设置初始值 renderingConfig: { codeSyntaxHighlighting: true, // 开启代码高亮 highlightingTheme: 'atom-one-light' // 自定义代码高亮主题 } } } }, components: { markdownEditor // 声明组件markdownEditor } }</script><template> <div> <img :src="src"> // 用于显示上传的图片 <vue-core-image-upload :class="['pure-button','pure-button-primary','js-btn-crop']" :crop="true" // 是否裁剪 text="上传图片" url="" // 上传路径 extensions="png,gif,jpeg,jpg" // 限制文件类型 @:imageuploaded="imageuploaded"> // 监听图片上传完成事件 </vue-core-image-upload> </div></template><script> import VueCoreImageUpload from 'vue-core-image-upload'; // 导入VueCoreImageUpload组件 export default { data: function(){ return { src:'../img/1.jpg' // 默认显示图片地址 } }, components: { VueCoreImageUpload // 声明组件VueCoreImageUpload }, methods:{ imageuploaded(res) { // 定义上传完成执行的方法 console.log(res) } } }</script><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>{ path: '/vuetable', component: resolve => require(['../components/page/VueTable.vue'], resolve) // vue-datasource组件},第二步：删除引入该组件的文件。在目录 src/components/page/ 删除 VueTable.vue 文件。<el-menu-item index="vuetable">Vue表格组件</el-menu-item>第四步：卸载该组件。执行以下命令：npm un vue-datasource -S完成。import 'element-ui/lib/theme-default/index.css'; // 默认主题// import '../static/css/theme-green/index.css'; // 浅绿色主题第二步：打开 src/App.vue 文件，找到 style 标签引入样式的地方，切换成浅绿色主题。@import "../static/css/main.css";@import "../static/css/color-dark.css"; /*深色主题*//*@import "../static/css/theme-green/color-green.css"; !*浅绿色主题*!*/第三步：打开 src/components/common/Sidebar.vue 文件，找到 el-menu 标签，把 theme="dark" 去掉即可。关键词：解决,方案,系统,管理,后台
