前端：vue-element-admin 搭建踩坑笔记
原创
前端：vue-element-admin 搭建踩坑笔记
vue-element-admin是一个已高度完成的系统原型，它基于vue框架和elementUI组件库。它使用最新的前端技术栈，内置i18n国际化解决方案、动态路由、权限验证。它可以帮助我们快速搭建企业级中后台系统原型。
大家在首次搭建vue-element-admin框架的时候会遇到各种各样依赖包的问题，我这边亲自从头到尾安装了该框架，最终经过了不少弯路，才搭建成功，今天给大家分享避免踩坑的技巧，希望对大家能够快速搭建该框架提供一些帮助！
1、本地安装node
首先本地安装后nodejs，我本地的版本如下：
PS E:\hgm\vue-admin\vue-element-admin> npm -v
6.14.16
PS E:\hgm\vue-admin\vue-element-admin> node -v
v14.19.1配置淘宝镜像
#配置npm为淘宝镜像
npm config set registry https://registry.npm.taobao.org
#查看配置是否正确
npm config get registry
2、克隆vue-element-admin项目
本地新建文件夹，比如E:\\vue-admin 然后执行命令克隆项目
# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git克隆之后文档目录如下
3、处理tui-editor依赖报错
找到package.json 去掉 "tui-editor": "1.3.3"
路径：vue-element-admin的根目录
原因：tui-editor（富文本编辑器插件）更名造成的，现在已经改名为toast-ui/editor并且该文件名和方法名都进行可修改，所以需要手动处理。
修改内容如下：
然后执行单独安装tui-editor
因为vue-element-admin项目依赖tui-editor ,手动执行命令安装就行
npm install --save @toast-ui/vue-editor4、安装其它依赖包
因为依赖包比较多，安装需要几分钟，大家耐心等几分钟。
npm install 注意：不要使用cnpm命令安装依赖包，会出现各种依赖问题。
5、替换使用tui-editor的内容
路径：E:\vue-admin\vue-element-admin\src\components\MarkdownEditor\index.vue
修改后的index.vue的完整内容，具体如下：
<template>
<div :id="id" />
</template>
<script>
// deps for editor
import 'codemirror/lib/codemirror.css' // codemirror
// 老版本注释掉
//import 'tui-editor/dist/tui-editor.css' // editor ui
//import 'tui-editor/dist/tui-editor-contents.css'
// editor content
//import Editor from '@tui-editor'
//替换为新的
import '@toast-ui/editor/dist/toastui-editor.css';
import Editor from '@toast-ui/vue-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>修改内容：
导入的包
import '@toast-ui/editor/dist/toastui-editor.css';
import Editor from '@toast-ui/vue-editor'index.vue 中方法替换
getValue和setValue分别换成getMarkdown和setMarkdown
6、启动项目
执行启动命令
npm run dev
说明：警告信息不影响正常启动 ，大家可以忽略。
7、最终运行效果
登录界面
主界面
8、总结
以上是搭建vue-element-admin框架的完整过程，大家如果有问题欢迎评论区沟通交流！
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
