记一次基于vue的spa多页签实践经验

前言

最近收到一个这样的需求,要求做一个基于 vue 和 element-ui 的通用后台框架页,具体要求如下:

  1. 要求通用性高,需要在后期四十多个子项目中使用,所以大部分地方都做成可配置的.
  2. 要求做成脚手架的形式.可以 npm 安装
  3. 要求实现多页签,并且可以通过浏览器 url 回显多页签.而且页签内要维护一个历史记录,可以后退
  4. 组件要求异步加载,减少首屏加载时间.

很明显,这就是一个 类 ERP 的应用. 做过 JSP 等后台的同学,对多页签应该都很熟悉吧.

那接下来我们就来谈谈实现.

通用性高

这点其实没啥难点,无非就是麻烦了点,把所有的数据,都提取出来,放在一个 config 文件里面.然后在框架页里面引入,并且绑定到相应的位置上去. 这边有个比较难以取舍的问题,就是如果把一溜的数据全部绑定到 vue 的 data 上面,由于数据量比较多,会导致性能问题,如果分开,又会使配置文件看起来相对复杂,增加后期使用人员的学习成本。这块要看具体的项目需求,由于我这边暂时对前端的性能要求没那么高,所以暂时用全部绑定到 data 的方案

做成脚手架形式

起初产品对这个的需求使做成组件的形式,然后发布 npm 包,方便后期更新的时候,只需更新一下 npm 就可以了,无需每个项目去复制粘贴替换,但是基于这是一个框架页,而且可配置项非常多,还要实现 tab 多页签等多方面的考虑,最终选择了脚手架的方案,即便这样后期升级会稍微麻烦一点(起初的方案是框架页放在一个文件夹里,到时候直接替换该文件夹),但相对于组件来说,还是更好维护的,况且后期可以再写一个更新的脚手架,毕竟现在发布一个 npm 工具的成本实在是太低了。

第一次开发脚手架,看了很多社区的帖子,发现目前大部分脚手架,一般都基于2种形式,一种基于文件复制的形式,另一种基于 git-clone 的形式,经过对比,我觉得文件复制的有点复杂了,我其实只是需要一个能一键安装的工具而已,所以 git-clone 的形式还是比较适合我。

以下就是脚手架的代码,虽然只是简单的五六十行代码,不过查资料+趟坑,也花了我一个上午的时间。

#!/usr/bin/env nodeconst shell = require(‘shelljs‘);const program = require(‘commander‘);const inquirer = require(‘inquirer‘);const ora = require(‘ora‘);const fs = require(‘fs‘);const path = require(‘path‘);const spinner = ora();const gitClone = require(‘git-clone‘)const chalk = require(‘chalk‘)program    .version(‘1.0.0‘, ‘-v, --version‘)
    .parse(process.argv);const questions = [{
  type: ‘input‘,
  name: ‘name‘,
  message: ‘请输入项目名称‘,
  default: ‘my-project‘,
  validate: (name)=>{
    if(/^[a-z]+/.test(name)){
      return true;
    }else{
      return ‘项目名称必须以小写字母开头‘;
    }
  }}]inquirer.prompt(questions).then((dir)=>{
  downloadTemplate(dir.name);})function downloadTemplate(dir){

  //  判断目录是否已存在
  let isHasDir = fs.existsSync(path.resolve(dir));
  if(isHasDir){
    spinner.fail(‘当前目录已存在!‘);
    return false;
  }
  spinner.start(`您选择的目录是: ${chalk.red(dir)}, 数据加载中,请稍后...`);

  // 克隆 模板文件
  gitClone(`https://github.com/noahlam/vue-multi-tab.git`, dir , null, function(err) {
    // 移除无用的文件
    shell.rm(‘-rf‘, `${dir}/.git`)
      spinner.succeed(‘项目初始化成功!‘)
    // 运行常用命令
    shell.cd(dir)
      spinner.start(`正在帮您安装依赖...`);
    shell.exec(‘npm i‘)
      spinner.succeed(‘依赖安装成功!‘)
    shell.exec(‘npm run dev‘)
  })}

如果你这个脚手架有疑问或者兴趣,可以直接访问 github 上的代码 tab-cli

实现多页签

要想实现多页签,那么 vue-router 基本算是废了,为什么? vue-router 是根据 url 来切换单个组件的,而页签则需要再组件内部同时存在多个子组件的,所以路由无法胜任(至少我是这么认为的,如果你有更好的方案,恳请不吝赐教)。

多个页签的显示,其实不难, element 有现成的 tab 组件,于是老夫写代码就是一把梭,撸起袖子就是干,噼里啪啦一顿写,写完一测,没有任何问题,实在是不要太简单,丢给产品预览:

  1. 复制浏览器地址到别的地方粘贴,tab 不能正确回显
  2. tab 内需要实现跳转,而且要能返回。

第一个问题比较简单,自己手写一个基于 hash 的 伪路由  把当前 tab 的 id 放到 url 上去,然后回显的时候,根据 url 打开对应的 tab.

tip: 关于如何实现路由,请看我另外一篇博客 自己动手实现一个前端路由

第二个问题,大概就是本文的重点了,这里详细说明一下需求,每个 tab 都可以在 tab 内部 跳转 ,这里的跳转,要做的跟 vue-router 的有大体上差不多,要能 push, replace, back,还能带参数。

那么怎么实现呢? 首先维护一个打开的 tab 列表,然后每个列表里面再维护一个用过的组件列表(包含参数),这样大概就能实现了吗?当然不是,组件的跳转,参数的传递,不可能让使用者自己去实现这些方法吧,我选择把封装一个公共对象,然后挂载在 vue.prototype上。然后类似 vue.$router.xxxx 一样(我的命名是 vue.$tab)可以在页面的任何地方使用,如果你对具体的实现方法有兴趣,欢迎点击本文结尾的链接,去我的Github仓库上查看。

组件异步加载

之前只用过基于 vue-router 的异步加载方法,然而这个项目里面并没有使用 vue-router,怎么异步呢? 翻了一下 vue 的官方文档是这么写的:

Vue.component(
  ‘async-webpack-example‘,
  // 这个 `import` 函数会返回一个 `Promise` 对象。
  () => import(‘./my-async-component‘))

然而我试了一下,发现报错了,import 不能在这里使用,换了 require 也不行,不知道上我哪里没弄好,如果你刚好知道又刚好有空,请告诉我,谢谢!后面在 segmentfault 上 看到 这一篇, 使用 webpack 的 require.ensure 可以实现

// 第一个字符串是 组件名,第二个是 组件路径,第三个是 chunkName (如果不指定则以1.js,2.js....n.js命名)vue.component(‘home‘, (resolve) => {require.ensure([], ()=>resolve(require(‘@/Views/index.vue‘)), ‘home‘)})

顺便还要在 webpack 里面的 output 下面配置一下 chunkFilename: ‘[name].js‘,,  当然文件名格式可以按你项目的需求来,我这边就按最简单的

结束语

首先,当然上献上该项目的 github地址 咯

其次是本文的的地址 个人技术帖合集

以上项目 欢迎随意 star 和 follow, 和不随意的 issue

原文地址:https://www.cnblogs.com/noahnee/p/9487072.html

时间: 2024-11-01 09:34:25

记一次基于vue的spa多页签实践经验的相关文章

基于Vue的SPA动态修改页面title的方法

最近基于VUE做个SPA手机端web发现动态修改页面标题通过document.title=xxxx 来修改着实蛋疼,而且在IOS的微信端据说没效果.百度发现要针对IOS的微信做点额外的操作,即:创建一个隐藏的Iframe,然后随便加载一个图片文件,然后加载完成移除,这样就能修改页面title了.网上有几种方案: 1,App.Vue里面设置title属性,然后页面title去绑定,所有子组件修改标题就通过 this.$root.data.title=xxxxx;去修改 缺点:App.Vue默认的e

基于Vue的前后端分离项目实践

一.为什么需要前后端分离 1.1什么是前后端分离  前后端分离这个词刚在毕业(15年)那会就听说过,但是直到17年前都没有接触过前后端分离的项目.怎么理解前后端分离?直观的感觉就是前后端分开去做,即功能和职责上的一种划分,前端负责页面的渲染,部分页面交互的逻辑,然后通过网络请求与后端进行数据的交互:后端则着重关注业务逻辑的处理,直接操控数据库. 1.2前后端未分离前(1)jsp + servlet 开发模式: JSP页面:负责视图层的渲染及交互,内部可以嵌入java 代码,在某些场景下开发起来比

基于Vue的SPA如何优化页面加载速度

常见的几种SPA优化方式 减小入口文件体积 静态资源本地缓存 开启GZip压缩 使用SSR ..... 减小入口文件体积,常用的手段是路由懒加载,开启路由懒加载之后,待请求的页面会单独打包js文件,使得入口文件index.js变小,开启懒加载之后,js是这样请求加载的: 2. 静态文件本地缓存有两种方式 HTTP缓存,设置Cache-Control,Last-Modified,Etag等响应头,很多文章讲的比较详细,推荐:https://www.cnblogs.com/chinajava/p/5

vue-multi-tab--一个让你在SPA里使用多页签的框架页

介绍 vue-multi-tab 是一套基于 vue 和 element-ui 的 , 实现了 tab-router (一个基于 tab 的路由) 的 单页面, 多页签 应用程序. 我之前写这个项目的时候,有写了一篇 记一次基于vue的spa多页签实践经验然后就部分热心网友就在下面回复了一些其他类似的项目,我逐一查看了一下,发现基本都是基于 vue-router 和 keep-alive 实现的,这种实现方法有两个比较明显的问题,第一是很难在页签内部跳转,比如我现在这个页签打开的是组件a,然后点

一次基于Vue.Js的用户体验优化

.mytitle { background: #2B6695; color: white; font-family: "微软雅黑", "宋体", "黑体", Arial; font-size: 18px; font-weight: bold; height: 25px; line-height: 25px; margin: 15px 0 !important; padding: 5px 0 5px 20px; width: 97% } .arti

VBox 一款基于vue开发的音乐盒 序章

之前自己基于vue写了一个 Mplayer, github地址:https://github.com/xiangwenhu/MPlaer, 演示地址:http://babydairy2017.cloudapp.net:3000/index#/index 只有简单的搜索播放随心听功能,样式适配上也很差, 路由就两个,数据都走vuex,数据转发是用nodejs自己转发,而且只是PC能比较好的展现,之后不了了之,偶尔也自己上来听听歌曲. 有一天,抬头看,有一片云,特别的蓝,风一吹,一阵花香飘来,美好,

Vue Admin - 基于 Vue & Bulma 后台管理面板

Vue Admin 是一个基于 Vue 2.0 & Bulma 0.3 的后台管理面板(管理系统),相当于是 Vue 版本的 Bootstrap 管理系统,提供了一组通用的后台界面 UI 和组件,其中还有丰富的图表组件,开箱即用.赶紧来体验一下吧. 在线演示      免费下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[

基于Vue.js 2.x系列的后台管理系统解决方案

基于Vue.js 2.x系列 + Element UI 的后台管理系统解决方案. github地址:https://github.com/lin-xin/manage-systemdemo地址:http://work.fengdb.com功能包括:Element UI登录/注销表格表单图表富文本编辑器markdown编辑器图片拖拽/裁剪上传支持切换主题色

基于Vue的Material Design UI库 Vue-Carbon

vue-carbon,基于 vue 开发material design 风格的移动端 WEB UI 库, 设计资源参考 CARBON FrameWork7(app开发公司). 安装 目前只使用 npm 安装,和使用 webpack 项目的应用(基础教程qkxue.net) npm install vue-carbon --save import Vue from 'vue' import VueCarbon from 'vue-carbon' Vue.use(VueCarbon) 简单使用 例如