前端大屏展示框架搭建（二）

大屏基本布局实现

基于element-ui进行布局。

安装

安装运行依赖

element-ui

安装开发依赖

babel-plugin-component

安装插件

vue-cli-plugin-element

布局

项目的整体布局是共用的，通过在vue的路由里配置component为Layout复用，这个vue的官方文档有介绍。

如上图所示：

• 1、建立一个layout文件夹存放项目的共用布局
• 2、工作需要，现需要一个上下两栏的布局，上面是工具栏
• 3、下面是内容展示栏，工具栏内点击切换的页面，路由就在内容页内加载
• 4、index.js是用来统筹引用布局用的组件的，2、3建的就是组件，如果需要用到别的布局组件，全都放这里，方便layout.vue引用（后面会在内容展示栏2边都分别再放一栏）
• 5、供路由使用的Layout文件，整体布局所在
• 6、复用布局的使用大概就标记6那样了

采用element的Container布局容器作为页面的整体布局，这里是基于1366x768像素做大屏页面，然后对全屏页面进行等比例缩放。

layout.vue

AppHead.vue

AppMain.vue

这样就得到了如下的布局了

这里基本就是基本的大屏展示框架了，然后为了适应大屏，需要对全屏页面等比例缩放，放到前端大屏展示框架搭建（三）介绍了，都是常用的方法。

工程代码

整个项目的代码在下面地址，参考commit就懂过程了

大屏开发框架工程代码