最热门的用于后台管理类产品开发的开源前端框架vue-element-admin-4.4.0的介绍和使用-Toy模板网

这篇具有很好参考价值的文章主要介绍了最热门的用于后台管理类产品开发的开源前端框架vue-element-admin-4.4.0的介绍和使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

简介

功能

1、环境准备

2、克隆（下载）vue-element-admin项目

3、处理tui-editor依赖报错

4、安装其它依赖包

5、替换使用tui-editor的内容

6、启动项目

7、运行效果

配置路由代码

布局组件代码

创建页面组件代码

配置主文件

vueadmin开源框架,# Vue,前端框架,开源,vue.js,VueElementAdmin

哈哈，本篇文章的标题有点长。在公众号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，您可以更好地实现自己的项目目标，提升自己的开发水平。

vueadmin开源框架,# Vue,前端框架,开源,vue.js,VueElementAdmin

接下来请来看我对vue-element-admin-4.4.0的分享，4.4.0也是目前最新的版本。

简介

vueadmin开源框架,# Vue,前端框架,开源,vue.js,VueElementAdmin

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

安装完后我本地的版本如下：

vueadmin开源框架,# Vue,前端框架,开源,vue.js,VueElementAdmin

如果安装过程很慢，可以配置淘宝镜像

# 配置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

克隆之后文档目录如下

vueadmin开源框架,# Vue,前端框架,开源,vue.js,VueElementAdmin

关于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操作会遇到错误。

vueadmin开源框架,# Vue,前端框架,开源,vue.js,VueElementAdmin

然后执行单独安装tui-editor

npm install --save @toast-ui/vue-editor

4、安装其它依赖包

使用npm执行下面的安装指令：

npm install

因为依赖包比较多，这个安装过程需要几分钟，也跟你的网速有关，请升级你的带宽吧。

注意：不要使用cnpm命令安装依赖包，会出现各种依赖问题。不信你可以试试，下图就是我遇到的6个坑，最后还是采用了npm。

vueadmin开源框架,# Vue,前端框架,开源,vue.js,VueElementAdmin

5、替换使用tui-editor的内容

找到文件：你的项目根路径\src\components\MarkdownEditor\index.vue

vueadmin开源框架,# Vue,前端框架,开源,vue.js,VueElementAdmin

修改后的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.mode      options.height = this.height      options.language = this.language      return 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) return      this.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、启动项目

执行启动命令

vueadmin开源框架,# Vue,前端框架,开源,vue.js,VueElementAdmin

或在命令行下执行：npm run dev

vueadmin开源框架,# Vue,前端框架,开源,vue.js,VueElementAdmin

说明：警告信息不影响正常启动，可以暂时忽略掉。

7、运行效果

启动服务后可能会自动打开浏览器进入登录界面

vueadmin开源框架,# Vue,前端框架,开源,vue.js,VueElementAdmin

登录后的主界面显示全是英文

vueadmin开源框架,# Vue,前端框架,开源,vue.js,VueElementAdmin

这个版本似乎默认没有提供国际化处理的功能，如下图是我自己做的国际化处理效果示例

vueadmin开源框架,# Vue,前端框架,开源,vue.js,VueElementAdmin

接下来我们讲解下几个代码示例，对帮助你理解这个前端的框架代码有帮助。

配置路由代码

Vue Element Admin 提供了一个灵活的路由配置方式，通过配置路由，您可以定义页面的访问路径和页面组件的关联关系。在 `src/router` 目录下的 index.js 文件可以配置自己的路由信息。

首页的路由控制逻辑代码

vueadmin开源框架,# Vue,前端框架,开源,vue.js,VueElementAdmin

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 = false
Vue.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_5734911https://blog.csdn.net/zhouruifu2015/category_5734911Node.js专栏

https://blog.csdn.net/zhouruifu2015/category_5728369.htmlhttps://blog.csdn.net/zhouruifu2015/category_5728369.html