百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 软件资讯 > 正文

手摸手,带你用vue撸后台 系列四(vueAdmin 极简的后台基础模板)

ninehua 2024-12-30 06:03 49 浏览



完整项目地址:vue-element-admin

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

前言

做这个 vueAdmin-template 的主要原因是: vue-element-admin 这个项目的初衷是一个 vue 的管理后台集成方案,把平时用到的一些组件或者经验分享给大家,同时它也在不断的维护和拓展中,比如最近重构了dashboard,加入了全屏功能,新增了 tabs-view 等等。所以项目会越来越复杂,不太适合很多初用 vue 的同学来构建后台。所以就写了这个基础模板,它没有复杂的功能,只包含了一个后台需要最基础的东西。 vueAdmin-template 主要是基于vue-cli webpack模板为基础开发的,引入了如下dependencies:

  • element-ui 饿了么出品的vue2.0 pc UI框架
  • axios 一个现在主流并且很好用的请求库 支持Promise
  • js-cookie 一个轻量的JavaScript库来处理cookie
  • normalize.css 格式化css
  • nprogress 轻量的全局进度条控制
  • vuex 官方状态管理
  • vue-router 官方路由

该项目只做了一个管理后台需要极简的功能,封装了axios请求,支持无限层级路由,动态权限和动态侧边栏。 如果需要更多复杂的功能可以参考 vue-element-admin,若还有不足,欢迎提issue或者pr。下文会简单说一下用该模板需要注意的地方。


路由懒加载

路由懒加载应该是写大一点的项目都会用的一个功能,只有在使用这个component的时候才会加载这个相应的组件,这样写大大减少了初始页面 js 的大小并且能更好的利用浏览器的缓存。

const Foo = resolve => require(['./Foo.vue'], resolve)
//或者
const Foo = () => import('./Foo');
复制代码

在懒加载页面不多的情况下一切是那么的美好,但我司后台业务在不断地迭代,现在项目近百个路由,这时候使用路由懒加载在开发模式下就是一件痛苦的事情了,随手改一行代码热更新都是要6000ms+的,这怎么能忍。楼主整整花了一天多的时间找原因,能webpack优化的方法都用了,什么 dll, HappyPack 等方法都是过了,但提升的效果都不是很明显,正好那段时间出了 webpack3 楼主也升级了,编译速度也得到了很大幅度的提升,不过也要2000ms+。后来经过大神 @jzlxiaohei 的指点发现原来是路由懒加载搞得鬼,楼主猜测可能是异步加载导致 webpack 每次的 cache 失效了,所以每次的rebuild 才会这么的慢。找到了原因我们就可以对症下药了,我们就自己封装了一个_import()的方法,只有在正式环境下才使用懒加载。这样解决了困扰多事的rebuild慢问题。代码

const _import = require('./_import_' + process.env.NODE_ENV);
const Foo = _import('Foo');
复制代码


整整比原来6000ms快了十多倍,我终于又能愉快的开发了。



权限 控制

在手摸手,带你用vue撸后台 系列二(登录权限篇)这章中其实已经详细介绍过了。该项目中权限的实现方式是:通过获取当前用户的权限去比对路由表,生成当前用户具的权限可访问的路由表,通过router.addRoutes动态挂载到router上。 但其实很多公司的业务逻辑可能不是这样的,举一个例子来说,很多公司的需求是每个页面的权限是动态配置的,不像本项目中是写死预设的。但其实原理是相同的。如这个例子,你可以在后台通过一个tree控件或者其它展现形式给每一个页面动态配置权限,之后将这份路由表存储到后端。当用户登录后根据role,后端返回一个相应的路由表或者前端去请求之前存储的路由表动态生成可访问页面,之后就是router.addRoutes动态挂载到router上,你会发现原来是相同的,万变不离其宗。


导航

侧边栏:本项目里的侧边栏是根据 router.js 配置的路由并且根据权限动态生成的,这样就省去了写一遍路由还要再手动写侧边栏这种麻烦事,同是使用了递归组件,这样不管你路由多少级嵌套,都能愉快的显示了。权限验证那里也做了递归的处理。


面包屑:本项目中也封装了一个面包屑导航,它也是通过watch $route动态生成的。代码


由于侧边栏导航和面包屑亦或是权限,你会发现其实都是和router密切相关的,所以基于vue-router路由信息对象上做了一下小小的拓展,自定义了一些属性


icon : the icon show in the sidebar

  • hidden : if hidden:true will not show in the sidebar
  • redirect : if redirect:noredirect will not redirct in the levelbar
  • noDropdown : if noDropdown:true will not has submenu in the sidebar
  • meta : { role: ['admin'] } will control the page role 大家也可以结合自己的业务需求增改这些自定义属性。

iconfont

element-ui自带的图标不是很丰富,但管理后台图标的定制性又很强。这里只给大家推荐使用阿里的 iconfont ,简单好用又方便管理。本项目中已经嵌入了一些 iconfont 作为例子,大家可以自行替换。 这里来简单介绍一下 iconfont 的使用方式。首先注册好 iconfont 账号之后,可以在我的项目中管理自己的 iconfont 。我司所有的项目都是用这个管理的,真心推荐使用。

创建好图标库后如果有更新替换也很方便,这里我使用了 Symbol 的方式引入,这里还有unicode,font-class的引入方式,有兴趣的可以自行研究。 之后我们点击下载 Symbol,会发现有如下这些文件,我们只要关心iconfont.js就可以了


我们将它替换项目中的 iconfont.js 就可以了。本项目中也封装了一个svg component 方便大家使用。


    <icon-svg icon-class="填入你需要的iconfont名字就能使用了"></icon-svg>
复制代码

favicon

每个项目都需要有一个属于自己的favicon。


其实实现起来非常的方便,我们主需要借助html-webpack-plugin


//webpack config
function resolveApp(relativePath) {
    return path.resolve(relativePath);
}
new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      favicon: resolveApp('favicon.ico')
    }),
复制代码

你只要将本项目跟目录下的favicon.ico文件替换为你想要的图标即可。


eslint

vue cli 默认提供了standard和airbnb 两种 lint 规范,说真的一个j检查校验的太松一个又太紧,而且每个团队的 lint 规范又是不同的,所以楼主干脆在项目里把大部分常用的 lint 规范都列举了出来并写上了注释方便大家修改代码地址,大家也可以把自己的规范上传到npm,像 vue 一样 vue-eslint-config。配置 eslint 对多人协作的项目有很大的好处,同时配置好lint 在加 ide 的 lint 插件写代码简直要起飞。相关配置可见第一篇教程。

postcss

相信大部分 vue 的项目都是基于 vue-cli 来开发的,不过毕竟每个人需求都是不太一样的,需要自定义一些的东西。就比如拿 postcss 来说 vue-cli 有一个小坑,它默认 autoprefixer 只会对通过 vue-loader 引入的样式有作用,换而言之也就是 .vue 文件里面的 css autoprefixer 才会效果。相关问题issues/544,issues/600。解决方案也很简单粗暴

//app.vue
<style lang="scss">
  @import './styles/index.scss'; // 全局自定义的css样式
</style>
复制代码

你在 .vue 文件中引入你要的样式就可以了,或者你可以改变 vue-cli的文件在 css-loader 前面在加一个 postcss-loader,在前面的issue地址中已经给出了解决方案。 这里再来说一下 postcss 的配置问题,新版的vue-cli webpack 模板 inti 之后跟目录下默认有一个.postcssrc.js 。vue-loader 的 postcss 会默认读取这个文件的里的配置项,所以在这里直接改配置文件就可以了。配置和postcss是一样的。

//.postcssrc.js
module.exports = {
  "plugins": {
    // to edit target browsers: use "browserlist" field in package.json
    "autoprefixer": {}
  }
}
//package.json
"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
复制代码

如上代码所述,autoprefixe r回去读取 package.json 下 browserslist的配置文件

  • > 1% 兼容全球使用率大于1%的游览器
  • last 2 versions 兼容每个游览器的最近两个版本
  • not ie <= 8 不兼容ie8及以下 具体可见 browserslist, postcss也还有很多很多其它的功能大家可以自行去把玩

babel-polyfill

本项目暂时没有兼容性需求,如有兼容性需求可自行使用babel-polyfill。 在Node/Browserify/webpack中使用

npm install --save babel-polyfill //下载依赖
复制代码

在入口文件中引入

import 'babel-polyfill';
// 或者
require('babel-polyfill');//es6
复制代码

在webpack.config.js中加入babel-polyfill到你的入口数组:

module.exports = {
    entry:["babel-polyfill","./app/js"]
}
复制代码

具体可参考 link

或者更简单暴力 polyfill.io 使用它给的一个 cdn 地址,引入这段js之后它会自动判断游览器,加载缺少的那部分 polyfill,但国内速度肯能不行,大家可以自己搭 cdn。


跨域问题

楼主 vue 群里的小伙伴们问的最多的问题还是关于跨域的,其实跨域问题真的不是一个很难解决的问题。这里我来简单总结一下我推荐的几种跨域解决方案。

  • 我最推荐的也是我司常用的方式就是**cors**全称为 Cross Origin Resource Sharing(跨域资源共享)。这玩意对应前端来说和平时发请求写法上没有任何区别,工作量基本都在后端这里。每一次请求浏览器必须先以 OPTIONS 请求方式发送一个预请求,从而获知服务器端对跨源请求所支持 HTTP 方法。在确认服务器允许该跨源请求的情况下,以实际的 HTTP 请求方法发送那个真正的请求。推荐的原因是只要第一次配好了,之后不管有多少接口和项目复用就可以了,一劳永逸的解决了跨域问题,而且不管是开发环境还是测试环境都能方便的使用。
  • 但总有后端觉得麻烦不想这么搞。那前端也是有解决方案的,在 dev 开发模式下可以下使用**webpack 的 proxy使用也是很方便的看一下文档就会使用了,楼主一些个人项目使用的该方法。但这种方法在生成环境是不适用的。在生产环境中需要使 用Nginx反向代理** 不管是 proxy 和 nginx 的原理都是一样的通过搭建一个中转服务器来转发请求规避跨域的问题。

开发环境 生成环境 cors cors proxy nginx

这里我只推荐这两种方式跨域,其它的跨域方式都很多,但真心主流的也就这两种方式。


easy-mock

vue-element-admin 由于是一个纯前端个人项目,所以所以的数据都是用mockjs生成的,它的原理是:拦截了所有的请求并代理到本地模拟数据,所以 network 中没有任何的请求发出。不过这并不符合实际业务开发中的场景,所以这个项目中使用了前不久刚出的 easy-mock,支持跨域,mockjs 的语法,支持Swagger 这几点还是挺不错的。相关文章

baseurl

线上或者测试环境接口的 base_url 不一样是很长见得需求,或者你在本地用了如 easy-mock 这种模拟数据到线上环境你想用自己公司生产环境的数据,这些需求都可以简单的通过用 baseurl 来解决。首先我们在config/下有dev.env.js和prod.env.js这两个配置文件。用它来区分不同环境的配置参数。

//dev.env.js
module.exports = {
  NODE_ENV: '"development"',
  BASE_API: '"https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin"',
}
//prod.env.js
module.exports = {
  NODE_ENV: '"production"',
  BASE_API: '"https://prod-xxx"',
}
复制代码

同时本项目封装了axios拦截器,方便大家使用,大家也可根据自己的业务自行修改。

import axios from 'axios';
import { Message } from 'element-ui';
import store from '../store';

// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url 读取config配置文件
  timeout: 5000                  // 请求超时时间
});

// request拦截器
service.interceptors.request.use(config => {
  if (store.getters.token) {
    config.headers['X-Token'] = store.getters.token; // 让每个请求携带自定义token 请根据实际情况自行修改
  }
  return config;
}, error => {
  // Do something with request error
  console.log(error); // for debug
  Promise.reject(error);
})

// respone拦截器
service.interceptors.response.use(
  response => {
  /**
  * code为非20000是抛错 可结合自己业务进行修改
  */
    const res = response.data;
    if (res.code !== 20000) {
      Message({
        message: res.data,
        type: 'error',
        duration: 5 * 1000
      });

      // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        MessageBox.confirm('你已被登出,可以取消继续留在该页面,或者重新登录', '确定登出', {
          confirmButtonText: '重新登录',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          store.dispatch('FedLogOut').then(() => {
            location.reload();// 为了重新实例化vue-router对象 避免bug
          });
        })
      }
      return Promise.reject(error);
    } else {
      return response.data;
    }
  },
  error => {
    console.log('err' + error);// for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    });
    return Promise.reject(error);
  }
)

export default service;
复制代码

由于axios每一个都是一个实例,你的请求都是基于这个实例来的,所以所以配置的参数属性都继承了下来.

//api.xxx.js
import fetch from '@/utils/fetch';
export function getInfo(token) {
  return fetch({
    url: '/user/info',
    method: 'get',
    params: { token }
  });
}
//你可以直接这样使用,之前拦截器写的东西都是生效的,
//它自动会有一个你之前配置的baseURL,
//但你说我这个请求baseURL和其它的不同,
//这也是很方便的,你可以字请求内部修改,
//它会自动覆盖你在创建实例时候写的参数如
export function getInfo(token) {
  return fetch({
    baseURL: https://api2-xxxx.com
    url: '/user/info',
    method: 'get',
    params: { token }
  });
}
复制代码

总结

这篇文章主要是介绍了 vueAdmin 做了哪些事情,希望大家如果有后台新项目要开发,建议基于 vue-admin-template 来开发,而 vue-element-admin 更多的是用来当做一个集成方案,你要什么功能就去里面找拿来用,因为两者的基础架构是一样的,所以复用成本也很低。

相关推荐

单打独斗的产品设计师工作流程总结

来人人都是产品经理【起点学院】,BAT实战派产品总监手把手系统带你学产品、学运营。我从入行开始就在一个做自己产品的小公司工作,到现在已经三年了。刚开始工作的时候什么也不懂,老板说让出效果图,就开始直接...

毕业生必备软件!6套APP构建我的产品设计工作流

工欲善其事,必先利其器。思维和方法论固然超级重要,但是掌握并制定适合自己的工作流也可以成倍提升效率。好的软件加上熟练的使用可以帮助解决遇到的所有问题,不仅可以减轻大脑和身体的负担,更可以让产品设计师在...

如何在APP原型上写需求?(app原型设计规范)

你有没有过这样的经历——辛辛苦苦写了半天的文档,结果开发一眼没看,做需求的时候又把文档里的内容问了一遍?如果你也有这样的经历,那么在APP原型上写需求,或许能帮你解决这个问题。为什么要把需求直接写在...

产品经理工具箱|原型及交互设计工具

来人人都是产品经理【起点学院】,BAT实战派产品总监手把手系统带你学产品、学运营。世界上最实在最方便的原型设计及交互工具:国外的谷歌,facebook等大型互联网公司的交互工具就是上面最原始,最有效最...

交互设计利器汇总:实用工具大揭秘!

近年来,页面交互设计有了很好的发展,越来越受到人们的重视。如果你想成为一名页面交互设计师,除了对平面设计和产品设计有一定的了解外,更重要的是要知道哪个软件适合页面交互设计。本文将带您了解5款流行的页面...

Taro - 京东凹凸实验室出品的小程序多端开发工具,内置 UI 组件库

可以支持转换到微信/京东/百度/支付宝/字节跳动/QQ小程序以及H5端,同时也支持使用Vue语法了。关于Taro凹凸实验室(O2Lab)来自京东零售集团,创建于2015年10月,是...

开发2小时,修bug2周,我用Trae做了个小程序

在当今快速发展的科技时代,AI技术的崛起为开发者带来了前所未有的机遇与挑战。一方面,AI极大地降低了技术门槛,让更多的创意得以快速实现;另一方面,它也提升了竞争维度,促使人们在认知、方法和时间效率上不...

好用的10款免费原型设计工具(免费的原型设计软件)

对产品经理或UI/UX设计师来说,一款好的原型设计工具至关重要。好的原型设计软件能够帮助你快速构建还原度高且信息架构清晰明了的原型图,还能极大减低工作中与同事的沟通成本,更高效地推进工作。那么,一款好...

用局域网内部分享Axure原型,这里有详细的步骤

来人人都是产品经理【起点学院】,BAT实战派产品总监手把手系统带你学产品、学运营。用axure做好原型,想分享给别人,有几个方法:生成本地文件,发送本地文件,但是文件有更新,就要重新发送用axure自...

Axure制作App原型应该怎样设置尺寸?原型尺寸对照表!

最近有几位小伙伴儿都提出同样一个疑问:想用Axure设计一个APP原型放到真实的移动设备中演示,但不知道应该使用什么尺寸?若要解释清楚像素和分辨率需要的篇幅比较长,请大家参考百度百科。这里老枪搜集...

200套数据可视化大屏模版Axure高保真原型

超炫可视化大屏模版来了,Axure高保真原型。关注微信公众号“素材帮帮站”,发送消息100051,获取素材下载地址。查看往期文章,获取更多免费素材。

Axure RP 8 Beta版正式上线(axure rp8是什么软件)

AxureSoftwareSolution公司于美国当地时间8月12日宣布其旗下产品AxureRP的v8版本的测试版正式上线。以下是其官方博客关于对AxureRP8Beta版的介绍:今天,...

PM小技术:使用SAE发布在线Axure文档

俗话说,不会写代码的产品经理不是好的射鸡湿。关于产品经理与技术之间的微妙关系,扯开了讲可是长篇大论,比如知乎上这个问题:IT行业产品经理(尤其是创业的)需要懂技术吗?懂到什么程度?,以及这个:产品经...

『原型资源』Axure自带图标库不够用,第三方经典图标库来袭

今天小编为大家带来第三方经典图标库,己确认内容可用现推荐给大家。直接上手就可不用自己画哈~获取原型文档请与班主任联系!先睹为快,合适再拿走不谢:图标太多,截取部分给大家参考o(* ̄︶ ̄*)o免费领取资...

Axure RP 8 测试版:将于今年夏天到来

我们一直在努力的开发AxureRP8。我认为这是对现有客户以及刚接触Axure的人的一个重要版本。我们希望看到你使用这些新特性,所以我们对现有客户免费升级。所有有AxureRP授权的客户包括标准...