目录
哈哈，本篇文章的标题有点长。在公众号CTO Plus前面的文章《前端开发技术栈（模板篇）：10款较流行的前端后台管理系统模板》中我们简单介绍了下10款开源的比较流行的前端后台管理系统模板。写本篇blog时，在github上的stars已经83.2k stars，记得当时它在github上的stars数最多82.2k，即表示最受欢迎。这个框架我用来开发我的网络安全产品《终端侦测与响应系统EDR》以及《威胁情报和漏洞特征库管理系统》、《漏洞扫描系统》的前端，所以本文将向您介绍如何使用 Vue Element Admin 4.4.0 进行开发，并给出一些实用的开发技巧和建议。
本篇原文：最热门的用于后台管理类产品开发的开源前端框架vue-element-admin-4.4.0的介绍和使用
在这个快速发展的技术时代，使用成熟的框架和工具能够大幅提高开发效率和代码质量。Vue Element Admin 作为一个功能强大的后台管理系统框架，可以帮助开发人员快速构建现代化的管理系统，并提供了丰富的组件和功能。通过学习和使用 Vue Element Admin，您可以更好地实现自己的项目目标，提升自己的开发水平。
接下来请来看我对vue-element-admin-4.4.0的分享，4.4.0也是目前最新的版本。
简介
Vue Element Admin 是一个基于 Vue.js 和 Element UI 的开源后台管理系统框架（后台前端解决方案），它提供了丰富的组件和功能，包括多语言支持（这个需要自己配置）、权限控制、面包屑、错误页面、图标等等。可以帮助开发人员快速构建现代化的后台管理系统。
它具有易于使用、高度可定制、响应式设计等特性。
它使用了最新的前端技术栈，内置了i18n国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，这个项目都能帮助到你。
功能
它拥有如下功能：
- 登录/注销- 权限验证- 页面权限- 指令权限- 权限配置- 二步登录- 多环境发布- dev- sit- stage- prod- 全局功能- 国际化多语言- 多种动态换肤- 动态侧边栏（支持多级路由嵌套）- 动态面包屑- 快捷导航(标签页)- Svg Sprite 图标- 本地/后端 mock 数据- Screenfull全屏- 自适应收缩侧边栏- 编辑器- 富文本- Markdown- JSON 等多格式- Excel- 导出excel- 导入excel- 前端可视化excel- 导出zip- 表格- 动态表格- 拖拽表格- 内联编辑- 错误页面- 401- 404- 組件- 头像上传- 返回顶部- 拖拽Dialog- 拖拽Select- 拖拽看板- 列表拖拽- SplitPane- Dropzone- Sticky- CountTo- 综合实例- 错误日志- Dashboard- 引导页- ECharts 图表- Clipboard(剪贴复制)- Markdown2htm
1、环境准备
在开始使用 Vue Element Admin 进行开发之前，您需要准备以下环境：
1. 安装并配置 Node.js
Vue Element Admin 是基于 Node.js 运行的，确保已经安装了最新的 Node.js 版本，并配置好了环境变量。node.js的安装和多版本管理我使用的是nvm，在公众号CTOPlus前面的文章《前端开发技术栈（工具篇）：2023最新版nvm的Win/Linux安装和使用（详细） 27.8k stars》已经有所介绍，详细的使用方法可以点击查看。
2. 安装 Vue CLI
Vue CLI 是一个用于快速搭建Vue.js 项目的脚手架工具，可以简化项目的开发和构建过程。您可以通过 npm 全局安装 Vue CLI：
npm install -g @vue/cli
安装完后我本地的版本如下：
如果安装过程很慢，可以配置淘宝镜像
# 配置npm为淘宝镜像
npm config set registry https://registry.npm.taobao.org
# 查看配置是否正确
npm config get registry
2、克隆（下载）vue-element-admin项目
克隆项目或者直接下载zip包
git clone https://github.com/PanJiaChen/vue-element-admin.git
或解压vue-element-admin-4.4.0.zip
克隆之后文档目录如下
关于git的使用可以参考公众号CTO Plus的文章《2、Git使用不完全指南：Git客户端的使用及使用Token认证方式提交代码详解(详细图文)》。
3、处理tui-editor依赖报错
在vue-element-admin的根目录下找到package.json 去掉 "tui-editor": "1.3.3"。
原因是tui-editor（富文本编辑器插件）更名造成的，现在已经改名为toast-ui/editor并且该文件名和方法名都进行可修改，所以需要手动处理。不然后面的npm install操作会遇到错误。
然后执行单独安装tui-editor
npm install --save @toast-ui/vue-editor
4、安装其它依赖包
使用npm执行下面的安装指令：
npm install
因为依赖包比较多，这个安装过程需要几分钟，也跟你的网速有关，请升级你的带宽吧。
注意：不要使用cnpm命令安装依赖包，会出现各种依赖问题。不信你可以试试，下图就是我遇到的6个坑，最后还是采用了npm。
5、替换使用tui-editor的内容
找到文件：你的项目根路径\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// deps for editorimport 'codemirror/lib/codemirror.css' // codemirrorimport '@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.modeoptions.height = this.heightoptions.language = this.languagereturn options}},watch: {value(newValue, preValue) {if (newValue !== preValue && newValue !== this.editor.getValue()) {this.editor.setValue(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.setValue(this.value)}this.editor.on('change', () => {this.$emit('input', this.editor.getValue())})},destroyEditor() {if (!this.editor) returnthis.editor.off('change')this.editor.remove()},setValue(value) {this.editor.setValue(value)},getValue() {return this.editor.getValue()},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'
方法替换
getValue和setValue分别换成getMarkdown和setMarkdown即可。
6、启动项目
执行启动命令
或在命令行下执行：npm run dev
说明：警告信息不影响正常启动，可以暂时忽略掉。
7、运行效果
启动服务后可能会自动打开浏览器进入登录界面
登录后的主界面显示全是英文
这个版本似乎默认没有提供国际化处理的功能，如下图是我自己做的国际化处理效果示例
接下来我们讲解下几个代码示例，对帮助你理解这个前端的框架代码有帮助。
配置路由代码
Vue Element Admin 提供了一个灵活的路由配置方式，通过配置路由，您可以定义页面的访问路径和页面组件的关联关系。在 `src/router` 目录下的 index.js 文件可以配置自己的路由信息。
首页的路由控制逻辑代码
import Vue from 'vue'import Router from 'vue-router'import Layout from '@/layout'Vue.use(Router)const routes = [{path: '/',component: Layout,redirect: '/dashboard',children: [{path: 'dashboard',component: () => import('@/views/dashboard/index'),name: 'Dashboard',meta: { title: 'Dashboard', icon: 'dashboard' }}]}]const router = new Router({mode: 'history',base: process.env.BASE_URL,routes})export default router
在上述代码中，首先引入了 Vue 和Router，并使用 `Vue.use()` 来注册Router 插件。然后，定义了一个 `Layout` 组件作为页面的布局组件，这个组件将被用作其他页面组件的容器。
接着，定义了一个路由数组 `routes`，其中包含了一个默认的路由配置，该配置将匹配根路径 `/`，并将页面重定向到 `/dashboard`。
在 `children` 数组中，定义了一个具体的子页面路由，它的路径为 `/dashboard`，关联的组件为 `Dashboard`，并设置了页面的标题和图标等元信息。
最后，创建了一个 `Router` 实例，并将路由数组作为参数传入，并将实例导出。
布局组件代码
在上一步的路由配置中，使用了一个名为 `Layout` 的组件作为页面的布局容器组件，下面我们来看看创建这个布局组件的代码。
在 `src/layout` 目录下创建一个新的 Vue 文件，命名为 `index.vue`，并编辑该文件，创建布局组件。
<template><div><el-container><el-header>Header</el-header><el-container><el-aside>Aside</el-aside><el-main><router-view/></el-main></el-container><el-footer>Footer</el-footer></el-container></div></template><script>export default {name: 'Layout'// 这里可以定义布局组件的其他配置项和方法}</script><style scoped>/* 这里可以定义布局组件的样式 */</style>
在上述代码中，我们使用了 Element UI 提供的 `el-container`、`el-header`、`el-aside` 和 `el-main` 等布局组件来创建一个基本的页面布局。
`el-container` 是一个容器组件，它可以将页面的整个区域划分为不同的部分，比如顶部的 Header、左侧的 Aside、中间的 Main 和底部的 Footer。
在布局组件中，我们使用 `<router-view/>` 标签来标识出路由配置中的子页面组件应该放置的位置。
创建页面组件代码
使用路由配置和布局组件，我们可以开始创建具体的页面组件了。在 `src/views` 目录下创建一个新的文件夹，命名为 `dashboard`，并在该文件夹下创建一个新的 Vue 文件，命名为 `index.vue`，编辑该文件，创建 Dashboard 页面组件。
<template><div class="dashboard"><h1>Dashboard</h1></div></template><script>export default {name: 'Dashboard'// 这里可以定义 Dashboard 组件的其他配置项和方法}</script><style scoped>.dashboard {/* 这里可以定义 Dashboard 组件的样式 */}</style>
在上述代码中，我们创建了一个简单的 Dashboard 页面组件，并在模板中添加一个标题。您可以根据实际需求完善页面的内容和样式。
配置主文件
在 `src/main.js` 文件中，我们需要进行一些配置来引入 Element UI 库，并注册路由和布局组件。
import Vue from 'vue'import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'import App from './App.vue'import router from './router'Vue.config.productionTip = falseVue.use(ElementUI)new Vue({router,render: h => h(App)}).$mount('#app')
在上述代码中，我们首先引入 Element UI 库，并添加相应的样式文件。
然后，我们导入 `App` 组件，该组件将作为根组件渲染到页面上。
接着，我们导入并使用路由实例，将其作为 Vue 实例的配置项之一。
最后，我们创建一个 Vue 实例，并将路由实例和根组件传入，最终将 Vue 实例挂载到页面的 `#app` 元素上。
参考资料
github地址：https://github.com/PanJiaChen/vue-element-admin.git
压缩包下载地址：https://codeload.github.com/PanJiaChen/vue-element-admin/zip/refs/tags/4.4.0
更多关于Vue前端相关技术点，敬请关注公众号：CTO Plus后续的发文，有问题欢迎后台留言交流。
大前端专栏
https://blog.csdn.net/zhouruifu2015/category_5734911
https://blog.csdn.net/zhouruifu2015/category_5734911Node.js专栏
更多资料 · 微信公众号搜索【CTO Plus】关注后，获取更多，我们一起学习交流。
关于公众号的描述访问如下链接
推荐阅读：
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
