vue-element-admin — это законченный прототип системы, основанный на платформе vue и библиотеке компонентов elementUI. Он использует новейший стек интерфейсных технологий со встроенным решением интернационализации i18n, динамической маршрутизацией и проверкой разрешений. Это может помочь нам быстро создавать прототипы промежуточных и серверных систем корпоративного уровня.
Когда вы впервые создадите фреймворк vue-element-admin, вы столкнетесь с различными проблемами пакетов зависимостей. Я лично установил фреймворк от начала до конца. В конце концов, я прошел через множество обходных путей, прежде чем успешно его создать. советы, как избежать ошибок. Надеюсь, они помогут вам быстро построить эту структуру!
Во-первых, после локальной установки 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 как зеркало Taobao
npm config set registry https://registry.npm.taobao.org
#Проверяем правильность конфигурации
npm config get registry
Создайте новую папку локально, например E:\\vue-admin, а затем выполните команду для клонирования проекта.
# Клонировать проект
git clone https://github.com/PanJiaChen/vue-element-admin.git
После клонирования каталог документов выглядит следующим образом:
Путь: корневой каталог vue-element-admin.
Причина: это вызвано переименованием tui-editor (подключаемого модуля редактора форматированного текста). Теперь он переименован в Toast-ui/editor, а имя файла и имя метода можно изменить, поэтому его необходимо обрабатывать вручную.
Изменения заключаются в следующем:
Поскольку проект vue-element-admin зависит от tui-editor, просто выполните команду вручную, чтобы установить его.
npm install --save @toast-ui/vue-editor
Поскольку существует множество зависимых пакетов, установка займет несколько минут. Наберитесь терпения и подождите несколько минут.
npm install
Примечание. Не используйте команду cnpm для установки пакетов зависимостей, так как могут возникнуть различные проблемы с зависимостями.
Файл: E:\vue-admin\vue-element-admin\src\comComponents\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 соответственно.
Выполнить команду запуска
npm run dev
Примечание. Предупреждающее сообщение не влияет на нормальный запуск и его можно игнорировать.
Интерфейс входа в систему
Основной интерфейс
Выше описан полный процесс создания инфраструктуры vue-element-admin. Если у вас есть какие-либо вопросы, задавайте их в области комментариев!