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

目录
  • vue-cli 多页面应用
  • 实现组件预览项目
  • 多页面应用配置
    • 页面布局
    • 左侧菜单栏
    • 中间区域
    • 右侧手机页
  • 功能扩展建议
  • 仓库源码
  • 总结

vue-cli 多页面应用

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

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

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

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

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

有赞:Vant

饿了么:Mint-UI

京东:Nutui

实现组件预览项目

本案例实现的功能:

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

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

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

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

  • 组件可能涉及到生命周期等函数,使用iframe页面,可以更加真实模拟组件调用;
  • 使用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: "子应用",
    },
  }

页面布局

  • 左侧菜单栏:根据主应用路由,递归生成;
  • 中间区域:主应用的子页面,根据路由切换;
  • 左侧区域:手机预览页,使用iframe实现;

目录结构

├── 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多页面实现组件预览内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue-cli实现多页面多路由的示例代码

    项目下载地址 vue-cli多页面多路由项目示例:vue+webpack+vue-router+vuex+mock+axios Usage This is a project template for vue-cli. github上找到某大神的一个基于vue-cli模板的vueAdmin后台管理的模板,根据项目需求改成一个多页面多路由的vue项目. PC端:后台管理页面,单独的页面入口,单独的路由. 移动端:业务展示页面,单独的页面入口,单独的路由. 踩了无数的坑,终于是初见效果了,随后继续优

  • Vue-cli创建项目从单页面到多页面的方法

    对于某些项目来说,单页面不能很好的满足需求,所以需要将vue-cli创建的单页面项目改为多页面项目. 需要修改以下几个文件: 1.下载依赖glob $npm install glob --save-dev 2.修改build下的文件 (1)修改webpack.base.conf.js 添加以下代码: var glob = require('glob'): var entries = getEntry('./src/pages/**/*.js') 将module.exports中的 entry:

  • vue-cli创建的项目,配置多页面的实现方法

    vue官方提供的命令行工具vue-cli,能够快速搭建单页应用.默认一个页面入口index.html,那么,如果我们需要多页面该如何配置,实际上也不复杂 假设要新建的页面是rule,以下以rule为例 创建新的html页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=d

  • 详解vue-cli + webpack 多页面实例应用

    关于vue.js vue.js是一套构建用户界面的 轻型的渐进式前端框架.它的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.使用vue可以给你的开发带来极致的编程体验. 关于vue-cli Vue-cli是vue官方提供的一个命令行工具(vue-cli),可用于快速搭建大型单页应用.该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程.只需一分钟即可启动带热重载.保存时静态检查以及可用于生产环境的构建配置的项目. 疑问 vue-cli主要是用于构建单页应用的脚手架,但

  • Vue-cli3多页面配置详解

    Vue-cli3发布已经好长时间了,笔者也在一直使用,由于公司业务需要要使用多页面配置,于是花时间研究了一下Vue-cli3如何配置多页面.由于Vue-cli3相比之前的版本做了很大的改动,在研究过程中也遇到一些问题. 对于Vue-cli3创建项目这里就不做太多的赘述了,毕竟不属于本文内容,有关相关博客也有很多,大家可以自行Google一下就好了. 多页面应用(mpa)与单页面应用(spa)优缺点 在项目中我们用到的大多数都是单页面应用(spa),对于多页面可能用到的比较少一些,具体还是要根据具

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

    目录 vue-cli 多页面应用 实现组件预览项目 多页面应用配置 页面布局 左侧菜单栏 中间区域 右侧手机页 功能扩展建议 仓库源码 总结 vue-cli 多页面应用 vue技术栈的同学,大多是用vue-cli来搭建单页面应用.如后台管理系统,H5活动等: vue-cli多页面应用开发 在初学时可能你有浏览过这方面的知识,但是实际开发中却比较少用到: 其实多页面还是非常实用的,它可以用来实现组件库的功能预览.H5可视化系统的页面预览.个人站点的功能介绍等: 你可以直接跳到文末的仓库源码,也可以

  • vue实现登陆页面开发实践

    目录 一.input的校验没有可说的,记住俩点,一个控制输入长度,一个控制格式. 二.验证码逻辑: 组件使用的是vant ui,具体用法可去官网看. 分几个部分考虑, 一.输入框input的校验:1.blur时没有值和格式不符合的逻辑校验2.限制输入长度逻辑,比如手机号只能11位,验证码只能6位.二.验证码按钮逻辑:1.不同状态下验证码颜色,文案,是否能点击,是否显示记数需要兼顾.2.验证码能够正常点击是在手机号格式正确情况下,所以这里要有个监听手机号,一旦格式符合,验证码生效3.关于计数器的逻

  • Vue.js 2.0 移动端拍照压缩图片预览及上传实例

    在学习和使用Vue.js 2.0 的过程中遇到不少不一样的地方,本来移动端开发H5应用,准备将mui框架和Vue.js+vue-router+vuex 全家桶结合起来使用,但是在拍照上传的实现过程中遇到了无法调用plus的H5+接口的问题,所以最后拍照上传功能还是使用input file方式里解决的.但是内心还是不甘心的,由于项目进度推进,迭代版本,所以不得不放弃,后续可能我将此功能使用调用H5+接口实现. 首先我来讲我实现这个拍照预览压缩上传的思路,准确的说应该是拍照或选择图片压缩之后预览及上

  • vue cli实现项目登陆页面流程详解

    目录 1. 搭建项目 1.1 使用vue-cli创建项目 1.2 通过npm安装element-ui 1.3 导入组件 2 创建登录页面 2.1 创建登录组件 2.2 引入css(css.txt) 2.3 配置路由 2.4 在Login组件中将提交按键调整为100%宽度 2.5 运行效果 3. 后台交互 3.1 引入axios 3.2 axios/qs/vue-axios安装与使用 3.2.1 安装axios 3.2.2 发送get请求 3.2.3 发送post请求 3.2.4 简化axios使

  • 详解vue-cli多页面工程实践第1/2页

    本文介绍了vue-cli多页面工程实践,分享给大家,具体如下: src目录结构 因为是自定义的设置,src下的目录结构需要固定,约定大于配置嘛. src目录结构: src/ components/ modules/ # 多页面 index/ # index 单页面 index.html main.js # 入口文件 page1/ index.html main.js group/ page2/ index.html main.js build中的配置 utils.js 增加: // match

  • Vue+UpLoad实现上传预览和删除图片的实践

    1.用vue+Element完成一个图片上传.点图预览.加删除功能,如图: 2.首先我们再组件中引入这一段代码,每个属性的使用也都放在这里了: <el-upload class="upload-demo" action=""//引号里面填要上传的图片地址,用接口的话是公共的接口地址拼接一个图片的接口 :on-preview="handlePreview"//图片已经上传完成时点击触发(钩子函数) :on-remove="handl

  • vue裁切预览组件功能的实现步骤

    vue版本裁切工具,包含预览功能 最终效果: qiuyaofan.github.io/vue-crop-de- 源码地址: github.com/qiuyaofan/v- 第一步:先用vue-cli安装脚手架(不会安装的看 vue-cli官网) // 初始化vue-cli vue init webpack my-plugin 第二步:创建文件 新建src/views/validSlideDemo.vue, src/components里新建VueCrop/index.js,VueCrop.vue

  • vue项目上传Github预览的实现示例

    最近在用Vue仿写cnode社区,想要上传到github,并通过Github pages预览,在这个过程中遇到了一些问题,因此写个笔记,以便查阅. 完成Vue项目以后,在上传到github之前,需要修改一些配置才能通过github pages预览项目. 一.修改配置 1.解决文件路径问题: 打开项目根目录config文件夹下的index.js文件,进行如下修改: 看清楚是 build(上边还有个dev 是开发环境下的配置,不需要改动)下的 assetsPublicPath :将'/'改为'./'

  • vue图片上传本地预览组件使用详解

    最近项目一直在使用vue,以前只是用vue做过一些简单的demo对数据进行增删改,并没有用于实际开发项目.今天就想了解一下如何用vue实现常见的图片上传前本地预览效果. 效果预览: <template> <div class="image-view"> <div class="addbox"> <input type="file" @change="getImgBase()">

  • 基于vue cli重构多页面脚手架过程详解

    官方提供的项目生成工具vue-cli没有对多页面webApp的支持,但是在实际的项目中,我们需要这样的脚手架,参考了很多大牛的方法,这里提供了一种我的单页面脚手架转换为多页面脚手架的方案,供大家参考.不好的地方也请大家指正. 准备 使用vue-cli生成一个你需要的单页面项目脚手架,然后我们就要开始我们的改装工程了. 重构过程 步骤一 改变目录结构 step1 在src目录下面新建views文件夹,然后再views文件夹下新建index文件夹 step2 将src目录下的main.js和App.

随机推荐