简介

vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui 实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。更多详情参考官方文档。

安装

# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git# 进入项目目录
cd vue-element-admin# 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org# 本地开发 启动项目
npm run dev

最终效果：

基础模板

vue-element-admin项目集成了很多可能用不到的功能，会造成不少的代码冗余。所以我们以vue-admin-template为基础模板，通过复制vue-element-admin项目的内容添加到基础模板中，从而实现符合自己需要的后台管理项目。

# 克隆项目
git clone https://github.com/PanJiaChen/vue-admin-template.git# 进入项目目录
cd vue-admin-template# 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org# 启动服务
npm run dev

最终效果：

整合到其它vue项目

我用vue-cli创建了一个vue项目，现在要把该后台管理系统整合vue项目中，我选择的是用复制的方法复制一个个视图文件。

首先其它vue项目要先安装好element-ui，然后把后台管理系统的视图文件根据自己的需要复制vue项目中，在后台管理系统源码的src文件夹下，还有该系统自带的一些图标、脚本文件，如下图：

部分视图文件需要依赖src/文件夹里的icons/、utils/等文件夹里的内容，复制时根据需要复制这些文件夹及内容到其它vue项目中。

后台前端解决方案vue-element-admin的安装及使用相关推荐

【前端】Vue+Element UI案例：通用后台管理系统-代码总结（已开源）
文章目录前言项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
【前端】Vue+Element UI案例：通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由
文章目录目标代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题总代码本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...
angular蚂蚁_Angular 中后台前端解决方案 - Ng Alain 介绍
背景之前项目使用过vue.js+iview,习惯了后端开发的我,总觉得使用不习惯,之前分析易企秀前端代码,接触到了angular js,完备的相关功能,类似后端开发的体验,让人耳目一新,全新的ang ...
ng-alain php,Angular 中后台前端解决方案 - Ng Alain 介绍
背景之前项目使用过vue.js+iview,习惯了后端开发的我,总觉得使用不习惯,之前分析易企秀前端代码,接触到了angular js,完备的相关功能,类似后端开发的体验,让人耳目一新,全新的ang ...
Vue Element Admin 使用mock模块模拟数据
Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路.通过预先跟服务器端约定好的接口,模拟请求数据甚至逻辑,能够让前端开发更加独立自主,不会被服务端的开发所阻塞. vue-elem ...
vue+element+admin（初始化项目）
2022.10.17我接触到了vue+element+admin的使用,首先要安装node.jshttps://nodejs.org/zh-cn/download/.和githttps://git-s ...
Angular 中后台前端解决方案 - Ng Alain 介绍
Angular 中后台前端解决方案 - Ng Alain 介绍参考文章: (1)Angular 中后台前端解决方案 - Ng Alain 介绍 (2)https://www.cnblogs.com/ ...

后台前端解决方案vue-element-admin的安装及使用

后台前端解决方案vue-element-admin的安装及使用

简介

安装

基础模板

整合到其它vue项目

后台前端解决方案vue-element-admin的安装及使用相关推荐

最新文章

热门文章