本文作者:开源技术之家

让程序员变懒的 “vue-admin-template” 后台管理系统

开源技术之家 1个月前 ( 09-23 ) 129 抢沙发



「~搭建后台管理系统~」


一、后台管理系统选型

1、集成方案: vue-element-admin

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

github地址:https://github.com/PanJiaChen/vue-element-admin


2、基础模板: vue-admin-template

vue-admin-template 是一个极简的 vue admin 管理后台。它只包含了 Element UI & axios & iconfont & permission control & lint,这些搭建后台必要的东西。

github地址:https://github.com/PanJiaChen/vue-admin-template


说明:

1)vue-element-admin模板当做工具箱或者集成方案仓库,因为本项目集成了很多你可能用不到的功能,会造成不少的代码冗余。

2)vue-admin-template模板基础上进行二次开发,功能或者组件就去 vue-element-admin 那里复制过来。

vue-element-admin 官网:(重要)

https://panjiachen.gitee.io/vue-element-admin-site/zh/


二、项目实践:

推荐大家选用 vue-admin-template 基础模板开发,同时可以参考vue-element-admin项目的效果,有需要用的组件就直接搬过来用。


项目安装:


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

浏览模板项目代码

熟悉使用vue脚手架生成项目的结构的话,对admin-template的结构就很清晰了。

src下的目录结构:


├── App.vue //入口├── api // 各种接口├── assets // 图片等资源├── components // 各种公共组件,非公共组件在各自view下维护├── icons //svg icon├── main.js //入口├── permission.js //认证入口├── router // 路由表├── store // 存储├── styles // 各种样式├── utils // 公共工具,非公共工具,在各自view下维护└── views // 各种layout

说明:Admin-template虽小,但是还是需要裁剪一些无用的demo。裁剪可以从router着手。


三、爬坑经验

1、启动打开会打开两个页面?

解决方法:

(1)vue.config.js  修改内容:devServer里面改为open: false

(2)package.json  修改内容:"dev": "vue-cli-service serve --open"


2、组件英文标识问题

在使用element-ui组件的时候,有些组件是英文的标识,比如分页组件(pagination),设置每一页多少条数的时候,输入框中显示的是英文的page,而不是中文。

处理方法,在main.js中,更改导入的语言包是zh-cn,如下所示:

原来代码:


import locale from 'element-ui/lib/locale/lang/en' // lang i18n

修改后的代码:


import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n

3、面包屑路径显示问题

Breadcrumb文件夹下的index.vue 文件:

原代码,错误状态:

代码如下:


getBreadcrumb() {      // only show routes with meta.title      const matched = this.$route.matched.filter(item => item.meta && item.meta.title)      const first = matched[0]      if (!this.isDashboard(first)) {        matched = [{ path: '/dashboard', meta: { title: '首页' }}].concat(matched)       }
     this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)    },

修改后代码,正确状态:

代码如下:


getBreadcrumb() {      // only show routes with meta.title      const matched = this.$route.matched.filter(item => item.meta && item.meta.title)      // const first = matched[0]      // if (!this.isDashboard(first)) {      //   matched = [{ path: '/dashboard', meta: { title: '首页' }}].concat(matched)      // }      this.levelList = matched      // this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)    },



本篇文章来源于微信公众号:                         前端学苑

本文标题:让程序员变懒的 “vue-admin-template” 后台管理系统
本文链接:https://www.kyjszj.com/htzq/2307.html
作者授权:除特别说明外,本文由 开源技术之家 原创编译并授权 开源技术之家 刊载发布。
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。
文章版权及转载声明

作者:开源技术之家本文地址:https://www.kyjszj.com/htzq/2307.html发布于 1个月前 ( 09-23 )
文章转载或复制请以超链接形式并注明出处开源技术之家

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享

发表评论

快捷回复:

评论列表 (暂无评论,129人围观)参与讨论

还没有评论,来说两句吧...