前言
公司要求快速搭建两套不同的后台管理系统，在寻找多个demo之后，最终锁定vue-element-admin作为最终方案，网址为：https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/#%E5%8A%9F%E8%83%BD
因为公司对后台系统没有过多的要求，所以我就选择了最基础的一套（需要fq下载，不能fq的可拉到最下面下载），但是部分页面需要更改的要注意。
一、package.json文件需要更改
{
"name": "vue-element-admin",
"version": "4.4.0",
"description": "A magical vue admin. An out-of-box UI solution for enterprise applications. Newest development stack of vue. Lots of awesome features",
"author": "Pan <[email protected]>",
"scripts": {
"dev": "vue-cli-service serve",
"lint": "eslint --ext .js,.vue src",
"build:prod": "vue-cli-service build",
"build:stage": "vue-cli-service build --mode staging",
"preview": "node build/index.js --preview",
"new": "plop",
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
"test:unit": "jest --clearCache && vue-cli-service test:unit",
"test:ci": "npm run lint && npm run test:unit"
},
"dependencies": {
"@toast-ui/editor": "^3.2.2",
"axios": "0.18.1",
"clipboard": "2.0.4",
"codemirror": "5.45.0",
"core-js": "3.6.5",
"driver.js": "0.9.5",
"dropzone": "5.5.1",
"echarts": "4.2.1",
"element-ui": "2.13.2",
"file-saver": "2.0.1",
"fuse.js": "3.4.4",
"husky": "^1.3.1",
"js-cookie": "2.2.0",
"jsonlint": "1.6.3",
"jszip": "3.2.1",
"normalize.css": "7.0.0",
"nprogress": "0.2.0",
"path-to-regexp": "2.4.0",
"regenerator-runtime": "^0.14.1",
"screenfull": "4.2.0",
"script-loader": "0.7.2",
"sortablejs": "1.8.4",
"svg-baker-runtime": "^1.4.7",
"vue": "2.6.10",
"vue-count-to": "1.0.13",
"vue-router": "3.0.2",
"vue-splitpane": "1.0.4",
"vue-style-loader": "^4.1.3",
"vuedraggable": "2.20.0",
"vuex": "3.1.0",
"xlsx": "0.14.1"
},
"devDependencies": {
"@babel/core": "^7.23.9",
"@babel/types": "^7.23.9",
"@soda/friendly-errors-webpack-plugin": "^1.8.1",
"@vue/babel-preset-app": "^5.0.8",
"@vue/cli-plugin-babel": "4.4.4",
"@vue/cli-plugin-eslint": "4.4.4",
"@vue/cli-plugin-unit-jest": "4.4.4",
"@vue/cli-service": "4.4.4",
"@vue/preload-webpack-plugin": "^2.0.0",
"@vue/test-utils": "1.0.0-beta.29",
"array.prototype.reduce": "^1.0.6",
"async": "^3.2.5",
"autoprefixer": "9.5.1",
"babel-eslint": "10.1.0",
"babel-jest": "23.6.0",
"babel-loader": "^9.1.3",
"babel-plugin-dynamic-import-node": "2.3.3",
"body-parser": "^1.20.2",
"browserslist": "^4.22.3",
"cache-loader": "^4.1.0",
"caniuse-lite": "^1.0.30001580",
"chalk": "2.4.2",
"chokidar": "2.1.5",
"connect": "3.6.6",
"copy-webpack-plugin": "^12.0.2",
"core-js": "^3.35.1",
"css-loader": "^6.9.1",
"es-abstract": "^1.22.3",
"eslint": "6.7.2",
"eslint-loader": "^4.0.2",
"eslint-plugin-vue": "6.2.2",
"file-loader": "^6.2.0",
"gensync": "^1.0.0-beta.2",
"html-webpack-plugin": "3.2.0",
"husky": "1.3.1",
"is-core-module": "^2.13.1",
"lint-staged": "8.1.5",
"lodash": "^4.17.21",
"mockjs": "1.0.1-beta3",
"plop": "2.3.0",
"portfinder": "^1.0.32",
"postcss-loader": "^8.0.0",
"pretty-error": "^4.0.0",
"runjs": "4.3.2",
"sass": "1.26.2",
"sass-loader": "8.0.2",
"script-ext-html-webpack-plugin": "2.1.3",
"semver": "^7.5.4",
"serve-static": "1.13.2",
"svg-sprite-loader": "4.1.3",
"svgo": "1.2.0",
"url-loader": "^4.1.1",
"util-promisifyall": "^1.0.6",
"util.promisify": "^1.1.2",
"vue-loader": "^15.11.1",
"vue-template-compiler": "2.6.10",
"webpack": "^4.46.0",
"webpack-dev-server": "^4.15.1",
"webpack-merge": "^5.10.0"
},
"browserslist": [
"> 1%",
"last 2 versions"
],
"bugs": {
"url": "https://github.com/PanJiaChen/vue-element-admin/issues"
},
"engines": {
"node": ">=8.9",
"npm": ">= 3.0.0"
},
"keywords": [
"vue",
"admin",
"dashboard",
"element-ui",
"boilerplate",
"admin-template",
"management-system"
],
"license": "MIT",
"lint-staged": {
"src/**/*.{js,vue}": [
"eslint --fix",
"git add"
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"repository": {
"type": "git",
"url": "git+https://github.com/PanJiaChen/vue-element-admin.git"
}
}
二、组件MarkdownEditor的富文本配置的toast-ui需要更改为@toast-ui
<template>
<div :id="id" />
</template>
<script>
import 'codemirror/lib/codemirror.css'
import '@toast-ui/editor/dist/toastui-editor.css'
import Editor from '@toast-ui/editor'
import defaultOptions from './default-options'
export default {
name: 'MarkdownEditor',
props: {
value: {
type: String,
default: ''
},
id: {
type: String,
required: false,
default() {
return 'markdown-editor-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '')
}
},
options: {
type: Object,
default() {
return defaultOptions
}
},
mode: {
type: String,
default: 'markdown'
},
height: {
type: String,
required: false,
default: '300px'
},
language: {
type: String,
required: false,
default: 'en_US' // https://github.com/nhnent/tui.editor/tree/master/src/js/langs
}
},
data() {
return {
editor: null
}
},
computed: {
editorOptions() {
const options = Object.assign({}, defaultOptions, this.options)
options.initialEditType = this.mode
options.height = this.height
options.language = this.language
return options
}
},
watch: {
value(newValue, preValue) {
if (newValue !== preValue && newValue !== this.editor.getMarkdown()) {
this.editor.setMarkdown(newValue)
}
},
language(val) {
this.destroyEditor()
this.initEditor()
},
height(newValue) {
this.editor.height(newValue)
},
mode(newValue) {
this.editor.changeMode(newValue)
}
},
mounted() {
this.initEditor()
},
destroyed() {
this.destroyEditor()
},
methods: {
initEditor() {
this.editor = new Editor({
el: document.getElementById(this.id),
...this.editorOptions
})
if (this.value) {
this.editor.setMarkdown(this.value)
}
this.editor.on('change', () => {
this.$emit('input', this.editor.getMarkdown())
})
},
destroyEditor() {
if (!this.editor) return
this.editor.off('change')
this.editor.remove()
},
setMarkdown(value) {
this.editor.setMarkdown(value)
},
getMarkdown() {
return this.editor.getMarkdown()
},
setHtml(value) {
this.editor.setHtml(value)
},
getHtml() {
return this.editor.getHtml()
}
}
}
</script>
最后启动即可，源码我放在了 https://github.com/zengxudong-bit/vue-element-admin.git
标签：vue,管理系统,admin,plugin,js,loader,editor,后台,源代码 From： https://www.cnblogs.com/zxd66666/p/17994075