Vue 定制模块化主题—开篇

公司项目最近提了一个很喜欢的需求，然后项目平台名字也高大上了，定制化大数据平台。根据不同的功能区，将整个页面划分为8个小的功能模块，然后在每个功能模块右上角有一个切换按钮，可以切换不同的模块。

一、问题

需要解决的问题

• 1、 模块间如何切换
• 2、 如何记忆存储客户选择的
• 3、模块弹窗的制作，可以看之前我写的Vue 弹窗姿势

产品迭代后期、可能遇到问题

• 1、不同主题页面的切换定制（子模块多达70多种，就算只是换个色板也很恐怖），而主体布局中将要存放组件的地方，我们称之为容器，容器是不变的，存放在容器中的组件是不会变化的，我们根据容器的长宽比将容器分为几类：1:1、1.2:1、1.5:1。组件需要根据不同容器进行适配
  • CSS
  • echarts 主题
• 2、子模块选择的拖拽功能

二、如何实现

主要分为两部分

• 子模块切换
• 用户子模块储存

.文件目录
+-- readme.md
+-- index.html
+-- src
|   +-- app.vue
|   +-- main.js
|   +-- router
     |   +-- index.js
|   +-- components
     |   +-- vbody
         |   +-- vtop
              |   +-- vcharts.vue
              |   +-- vprofiles.vue
         |   +-- vbottom
     |   +-- vechart
|   +-- page
     |   +-- home
          |   +-- header
          |   +-- body
               |   +-- top.vue
               |   +-- bottom.vue
+-- main.js

管理以及储存用户子模块状态

let topBody = resolve => {require.ensure(['@/pages/home/topBody.vue'], () => {resolve(require('@/pages/home/topBody.vue'))})}
//客流分析__bar
let vtopOne = resolve => {require.ensure(['@/pages/home/vcomponent/vtopOne.vue'], () => {resolve(require('@/pages/home/vcomponent/vtopOne.vue'))})}
let vprofies = resolve => {require.ensure(['@/pages/home/vcomponent/vprofies.vue'], () => {resolve(require('@/pages/home/vcomponent/vprofies.vue'))})}

//存放当前模块状态，数组字符串
let status =[
    'vtopOne',
    'topBody',
    'vprofies',
    ]
let conponets={}
//字符串转对象变量
for (var i = 0; i < status.length; i++) {
let index=status[i]
conponets[index]=eval(index)
} 
export default conponets;

CSS部分

项目需求:
单页面展示（1200px、1460px、1920px宽度）在缩放过程中自适应；
由于屏幕跨度大，字体也要自适应

一、 项目演变

• 1、宽高采用百分比布局，各大小屏幕要整屏显示。

项目问题：页面布局采用百分比布局的方式，但开发过程中逐步出现了问题，如果客户打开页面并不是全屏，高度不是完全打开，主页面中的模块内容会出现很严重的形变问题，CSS很容易，但用好CSS真的不容易。好像又偏题了 * . *

• 2、Rem 自适应字体
  字体设置最开始使用采用rem方案，在根文件app.vue处设置适配，不同屏幕下设置html的font-size。

@media screen and (max-width: 1079px) {html{font-size:10px;}}
@media screen and (min-width: 1080px) {html{font-size:12px;}}
@media screen and (min-width: 1270px) {html{font-size:14px;}}
@media screen and (min-width: 1460px) {html{font-size:16px;}}
@media screen and (min-width: 1599px) {html{font-size:18px;}}
@media screen and (min-width: 1910px) {html{font-size:20px;}}

使用效果：对于自适应的布局主体部分使用效果还是不错，但还有一个组件内部字体，以及大量被使用的echarts图表字体的适配问题还没有被解决

• 3、Flex布局新出路
  最后在一番充（xian）电（guang）过程中，学到了新姿势,很神奇的Flex布局，之前就尝试过强迫自己去理解了学习Flex布局方式，但其实挺难理解flex布局的想法的。百分比布局用多了后，再来看Flex，就感觉Flex就跟人工智能一样，很好很强大。我们只需要去指挥Flex去对页面进行布局，而不用像以前一样，在页面上强行码砖。

使用效果：减少很大部分需要做考虑适配的地方，将更多的精力专注于想要的效果中，解放生产力。虽然现在主流浏览器对Flex支持已经很不错了，但还是会遇到一些坑，不过就性价比来说，都是小事，要根据实际开发过程中项目需求来自行判断。

• 4、被忽略的Em布局
  最开始进行移动端开发的时候接触Rem顺便也接触了em，Rem是根据根元素也就是页面的html标签的 font-size属性作为参考，也就是说Rem无论在什么嵌套位置都只把html作为参考。而em则是继承于父级元素的font-size，在最开始还没有进行模块化开发的时候，很难去确定我对某一个元素使用em后，能确保他是我想要的结果，可能不经意间的一个操作都会导致页面扭曲变形。但现在，少年使用模块化的你，还在犹豫什么，em 让组件更组件。主体布局作为容器可以认为它是不变的或者变化是可控的，组件字体或者其内容间距使用em布局，组件适配更完美😄

使用效果：适度使用，有利于身心健康

参考资料
CSS中强大的EM
一个完整的Flexbox指南

---

the end
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　By Rico