Unduh webAdmin - Unduh Kode Sumber webAdmin

webAdmin

Kategori lainnya

1.0.0

Unduh

Mengelola sistem

Solusi Sistem Manajemen Latar Belakang Berdasarkan Vue.js 2.x Series+ Elemen UI. Alamat online

Dokumen bahasa Inggris

Menyumbangkan

Kata pengantar

Saya dulu menggunakan pustaka komponen elemen VUE + di perusahaan untuk membuat sistem manajemen latar belakang. Seperti unggahan pemotongan gambar, editor teks kaya, grafik, dll. Sangat umum di sistem manajemen latar belakang, Anda perlu mengutip komponen lain untuk diselesaikan. Dari mencari komponen, hingga proses penggunaan komponen, saya menghadapi banyak masalah dan mengakumulasikan pengalaman berharga. Jadi saya merangkum pengalaman mengembangkan sistem manajemen latar belakang ini ke dalam solusi sistem manajemen latar belakang ini.

Skema ini, sebagai templat kerangka latar belakang multifungsi, cocok untuk sebagian besar sistem manajemen web. Berdasarkan vue.js, gunakan perancah Vue-Cli untuk dengan cepat menghasilkan direktori proyek dan mengutip perpustakaan komponen elemen UI untuk memfasilitasi pengembangan komponen yang cepat dan sederhana dan indah. Gaya warna terpisah, mendukung warna tema switching manual, dan nyaman untuk menggunakan warna tema khusus.

Fungsi

Pendahuluan Struktur Direktori

 |-- 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                        // 说明

Langkah Instalasi

 git clone https://github.com/lin-xin/manage-system.git      // 把模板下载到本地
cd manage-system    // 进入模板目录
npm install         // 安装项目依赖，等待安装完成之后

Pengembangan Lokal

 // 开启服务器，浏览器访问 http://localhost:8080
npm run dev

Membangun produksi

 // 执行构建命令，生成的dist文件夹放在服务器下即可访问
npm run build

Instruksi dan demonstrasi penggunaan motorik

jadwal vue

Vue.js merangkum komponen grafik schart.js. Alamat Kunjungi: 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>

Elemen-ui

Perpustakaan komponen desktop berdasarkan vue.js2.0. Alamat akses: Elemen

Vue-Datasource

Komponen server vue.js untuk formulir pembuatan dinamis. Alamat Kunjungi: Vue-Datasource

Vue-Quill-Editor

Berdasarkan Quill, seorang editor teks kaya yang cocok untuk Vue2. Alamat Kunjungi: Vue-Quill-Editor

Vue-Simplemde

Komponen Editor Markdown Vue.js. Alamat Akses: Vue-Simplemde

VUE-CORE-IMAGE-UPLOAD

Plugin Upload Vue yang ringan mendukung pemotongan. Alamat Kunjungi: Vue-Core-Image-Upload

Tindakan pencegahan lainnya

Pertama, jika saya tidak ingin menggunakan beberapa komponen di atas, bagaimana saya bisa menghapus di templat tanpa mempengaruhi fungsi lain?

Ambil kastanye, saya tidak ingin menggunakan komponen vue-datasource, maka saya harus pergi dalam empat langkah.

Langkah 1: Hapus rute komponen, dan temukan rute untuk memperkenalkan komponen reorganisasi di direktori SRC/Router/Index.js, dan hapus kode berikut.

 {
    path : '/vuetable' ,
    component : resolve => require ( [ '../components/page/VueTable.vue' ] , resolve )     // vue-datasource组件
} ,

Langkah 2: Hapus file yang memperkenalkan komponen. Di direktori SRC/Komponen/Halaman/Hapus file vuetable.vue.

Langkah 3: Hapus pintu masuk ke halaman. Dalam direktori SRC/Komponen/Common/Sidebar.vue, temukan pintu masuk dan hapus kode berikut.

 < el-menu-item index =" vuetable " > Vue表格组件</ el-menu-item >

Langkah 4: Hapus instalan komponen ini. Jalankan perintah berikut:

 npm un vue-datasource -S

Menyelesaikan.

2. Bagaimana cara mengganti warna tema?

Langkah 1: Buka file src/main.js, temukan tempat untuk memperkenalkan gaya elemen, dan gantilah dengan tema hijau muda.

 import 'element-ui/lib/theme-default/index.css' ;    // 默认主题
// import '../static/css/theme-green/index.css';       // 浅绿色主题

Langkah 2: Buka file src/app.vue, temukan tempat di mana label gaya diperkenalkan, dan beralih ke tema hijau muda.

@ import "../static/css/main.css" ;
@ import "../static/css/color-dark.css" ;     /*深色主题*/
/*@import "../static/css/theme-green/color-green.css";   !*浅绿色主题*!*/

Langkah 3: Buka file SRC/Components/Common/Sidebar.vue, temukan tag el-menu, hapus tema = "gelap".