vue-cli多页面应用vue技术栈的同学大多使用vue-cli搭建单页面应用。如后台管理系统、H5活动等；vue-cli多页面应用开发初学时可能浏览过这些知识，但在实际开发中很少用到；其实多页面还是很实用的，可以用来实现组件库的功能预览，H5可视化系统的页面预览，个人站点的功能介绍等等；可以直接跳转文末仓库源码，也可以跟着本文逐步搭建一个vue-cli多页应用比如下面这个网站，都可以用多页应用实现::喜欢:Vant饿了么：Mint-UI京东：Nutui实现组件预览项目本例实现的功能：1.左侧菜单栏，点击菜单后，中心区域页面，手机界面会切换；2、中间页面区：是我们的组件介绍，用来写组件参数，使用说明等；3、右侧手机页面：是一个iframe页面，用于预览组件的具体功能；其实右边的Mobile页面也可以用动态组件实现，为什么要用多页面应用开发呢？主要是出于对以下问题的考虑：组件可能涉及到生命周期等功能，使用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#路由├───查看#Page├──App.vue#查看入口├──main.js#项目入口vue.config.js配置页面:{index:{entry:'./src/main.js',template:'./public/index.html',filename：'index.html'，标题：“主应用程序”，}，view1：{条目：'./srcview/main.js'，模板：'./public/view.html'，文件名：'view.html',title:"Sub-app",},}页面布局左侧菜单栏：根据主应用路由递归生成；中间区域：主应用的子页面，根据路由切换；左侧区域：手机预览页面，使用iframe实现；目录结构├──layout├──menu#Menu├──index.vue#Mainbody├──look.vue#手机页面左侧菜单栏该项目的菜单使用组件递归。详细案例可以参考上一篇【业务实例】Vue组件递归及其应用，菜单开发有两点需要注意：1.@src/layout/menu:index.vue使用v-bind="$attrs”传递代际组件的props属性；使用v-on="$listeners"进行跨代组件的事件传递；在组件开发中，可以减少代码编写。这个写法很实用（做笔记，这是期末考试的重点）
