文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue-cli多页面应用实践之实现组件预览项目

2024-04-02 19:55

关注

vue-cli 多页面应用

vue技术栈的同学,大多是用vue-cli来搭建单页面应用。如后台管理系统,H5活动等;

vue-cli多页面应用开发 在初学时可能你有浏览过这方面的知识,但是实际开发中却比较少用到;

其实多页面还是非常实用的,它可以用来实现组件库的功能预览、H5可视化系统的页面预览、个人站点的功能介绍等;

你可以直接跳到文末的仓库源码,也可以跟着本文逐步搭建一个vue-cli多页面应用

例如下面的网站,都可以用多页面应用来实现::

有赞:Vant

饿了么:Mint-UI

京东:Nutui

实现组件预览项目

本案例实现的功能:

1.左侧菜单栏,点击菜单后,中心区域页面、手机界面都会切换;

2.中间页面区域:是我们的组件介绍,用来编写组件参数、说明等;

3.右侧手机页:是一个iframe页面,用来预览组件具体的功能;

实际上,右侧手机页也可以使用 动态组件 来实现,为什么还要使用多页面应用开发呢? 主要是出于下面几个问题的考虑:

多页面应用配置

用vue-cli搭建项目后,在vue.config.js文件配置多页面(如果没有该文件,就手动新建),参考官网案例 vue-cli多页面配置

多页面项目的工程目录(核心文件说明)

├── public                # html
    ├── index.html        # 主应用
    ├── view.html         # 子应用
├── src                   # 主应用
    ├── layout            # 页面布局
    ├── router            # 路由
    ├── view              # 页面
    ├── App.vue           # 视图入口
    ├── main.js           # 项目入口
├── srcview               # 子应用
    ├── router            # 路由
    ├── view              # 页面
    ├── App.vue           # 视图入口
    ├── main.js           # 项目入口

vue.config.js 配置

  pages: {
    index: {
      entry: './src/main.js',
      template: './public/index.html',
      filename: 'index.html',
      title: "主应用",
    },
    view: {
      entry: './srcview/main.js',
      template: './public/view.html',
      filename: 'view.html',
      title: "子应用",
    },
  }

页面布局

目录结构

├── layout                
    ├── menu              # 菜单
    ├── index.vue         # 主体
    ├── look.vue          # 手机页

左侧菜单栏

本次项目的菜单使用了组件递归,详细案例可参考之前的文章【业务实例】vue组件递归及其应用,菜单开发有两个注意点:

1. @src/layout/menu: index.vue

使用v-bind="$attrs"进行隔代组件的props属性传递;

使用v-on="$listeners"进行隔代组件的事件传递;

在组件开发中,可以减少代码编写,这个书写技巧非常实用(做好笔记,这是期末考试重点)

 <!-- 核心代码 -->
<el-menu class="p-el-menu">
      <p-el-menu v-bind="$attrs" v-on="$listeners" />
</el-menu>

2. @src/layout/menu:p-el-menu.vue

菜单使用组件递归生成,所以对于多层代码,我们需要通过v-on="$listeners"进行事件传递,否则无法正确获取菜单的点击事件

 <!-- 核心代码 -->
 <p-el-menu :menuList="menu.children" v-on="$listeners" />

中间区域

中间区域是比较常规的路由嵌套设置,直接上代码

@src/layout/menu:index.vue

<el-main>
    <transition name="fade-transform" mode="out-in">
        <!-- 核心代码 -->
        <router-view></router-view>
    </transition>
</el-main>

右侧手机页

@src/layout/menu:look.vue

手机界面用iframe实现,菜单点击后,将拿到最新的currentUrl,然后拼接上/view#/(因为在vue.config.js中配置该路径的页面),即可打开子应用的页面

<!-- 核心代码 -->
<iframe :src="src" frameborder="0" class="view-iframe"></iframe>

<!-- 计算属性-->
computed: {
    src() {
      let url = `${location.origin}/view#/${this.currentUrl}`;
      return url;
    },
},

功能扩展建议

本次项目对主界面、手机界面进行了项目分离,便于维护。你可以尝试二次改造,例如:

更多功能实现,评论区交流

仓库源码

vue-multi-page

总结

到此这篇关于vue-cli多页面应用实践之实现组件预览项目的文章就介绍到这了,更多相关vue-cli多页面实现组件预览内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯