Vue前端组件化

前端组件化

1. 前言

前端组件化基于UI组件化文档设计方案，通过模块化、组件化思想实现前端组件化。此文档主要介绍如下四部分内容：

1. 模块化开发方案
2. 项目灵活配置方案
3. CSS主题样式方案
4. 前端独立部署方案

代码可视化相关文档见：https://blog.csdn.net/weixin_43279985/article/details/124566546

2. Vue-demo简介

此套前端组件化模板Vue-demo,采用Vue+Elemen+Echart+Axios等js库开发,项目中已经集成好常用依赖包管理文件,后续项目开发中无需重新安装,框架具备开箱即用功能,实际项目需求中可结合此模板进行拓展。

Vue-demo目前已安装的依赖包，后续无需重复安装。

"dependencies": {
"@jiaminghi/data-view": "^2.10.0", // 图表库
"axios": "^0.24.0",                // http库
"core-js": "^2.6.5",               // JavaScript标准库的polyfill
"element-ui": "^2.4.5",            // UI库
"vue": "^2.6.10",                  // Vue库
"vue-router": "^3.0.3",            // Vue路由
"vuex": "^3.0.1"                   // Vue状态管理
}

3. Demo架构参考

根据前端开发的整体流程，梳理了一套简单的架构体系，其中包括了前期开发、构建、测试、部署、上线运维等过程。

4. 项目目录结构

├── public  
    ├── favicon.ico            // favicon图标
    ├── index.html             // html模板
├── src                        // 源代码
│   ├── api                    // 所有请求
│   ├── assets                 // 静态资源
│   ├── components             // 全局组件库 
        ├── chart              // 全局图表组件
            ├── bar            // 柱状图表组件
            ├── line           // 线性图表组件
            ├── pie            // 饼图图表组件
        ├── common             // 全局公共组件
            ├── dialog         // 弹窗组件
            ├── table          // 表格组件
            ├── title          // 标题组件
            ├── function       // 功能区组件
            ├── layoutBase     // 布局组件(基础布局)
            ├── layoutBetween  // 布局组件(其他布局)
│   ├── plugins                // 全局插件
    ├── routerview             // 路由
│   ├── theme                  // 样式主题
        ├── light
            ├── light.scss     // Element清新(浅色)主题
        ├── tech
            ├── tech.scss      // Element科技(深色)主题
│   ├── utils                  // 工具类
│   ├── views                  // view
        ├── index.vue          // 首页
│   ├── App.vue                // 入口页面
│   ├── main.js                // 入口加载组件、初始化等
│   ├── router                 // 路由列表
│   ├── store                  // 全局store管理
├── .gitignore                 // git 忽略项
└── .env                       // 全局环境变量配置文件
└── .env.development           // 开发环境下,环境变量配置文件
└── .env.production            // 生产环境下,环境变量配置文件
└── package.json               // package.json
└── vue.config.js              // vue 配置项

5. 什么是组件

通过对样式(css)模版(html)逻辑(js)的封装，构成一个内部作用域隔离的功能模块。组件通过props/attribute和Event进行统一的通信方式；组件拥有lifecycle钩子函数可以方便的对自身状态进行管理。通过使用组件来可以提升代码的可维护性和复用性。

6. 如何开发和使用组件

6.1 如何开发组件

6.1.1 组件目录

Vue框架默认已经生成组件目录components,后续开发只需往components中根据分类叠加组件即可。

│   ├── components             // 全局组件库 
        ├── chart              // 全局图表组件
            ├── bar            // 柱状图表组件
            ├── line           // 线性图表组件
            ├── pie            // 饼图图表组件
        ├── common             // 全局公共组件
            ├── dialog         // 弹窗组件
            ├── table          // 表格组件
            ├── title          // 标题组件
            ├── function       // 功能区组件
            ├── layoutBase     // 布局组件(基础布局)
            ├── layoutBetween  // 布局组件(其他布局)

6.1.2 组件命名

开发过程中需要根据具体场景进行组件归类,目前如全局图表类分为chart、全局公共组件分为common,后续可按照组件功能或者组件类型等归类进行拓展。

6.1.3 组件开发

开发过程中可以直接复制一个现有的compoment，重命名为你需开发的模块名即可，再根据具体应用场景进行参数配置。

例如：通过配置title给弹窗传入标题。

<cmp-dialog title="弹窗标题部分">

6.2 如何使用组件

如需使用已经开发好的组件文件,只需要在具体page采用import方式引入即可，具体操作分为以下三个步骤:

1. import方式引入组件

import ComponentA from './ComponentA'

2. 模块系统中局部注册

export default {
  components: {
    ComponentA
  },
}

3. page挂载

<div id="app">
  <component-a></component-a>
</div>

7. 组件介绍

7.1 基础类布局组件

layoutBase布局称为基础布局，该布局两侧挂接浮动面板，浮动面板不占据主体布局空间，适合主体区域展示模型、GIS地图等内容。此类布局使用频率较高，将此布局归为基础类布局。

基础类布局组件效果图如下：

7.1.1 如何使用基础类布局组件

此基础布局组件已经进行了布局空间的划分,当项目中需要开发新的页面page时，可复制此基础类布局组件，并重命名即可成为一个新的页面模板，往模板内填充具体所开发的内容即可，往往这里需要结合具体UI设计图。

如下template模板所示，开发过程中我们只需要往各个<!-- pending -->注释区域内填充UI设计图中实际需要的页面内容即可。

基础类布局html结构如下：

<template>
  <div id="data-view">
    <dv-full-screen-container>
        
      <!-- pending 标题区 -->
        
      <dv-border-box-13 class="layout-base-container">
        <div class="base-left-chart-container"
             :style="showData=='data'?'width:22%':'width:10%'">
          <dv-border-box-10 v-if="showData=='data'">
              
            <!-- pending 左侧内容区 -->
              
          </dv-border-box-10>
        </div>
        <div class="base-center-chart-container">
            
          <!-- pending 中间内容区域||模型区 -->
            
        </div>
        <div class="base-right-chart-container">
            
          <!-- pending 右侧内容区 -->
          
        </div>
      </dv-border-box-13>
    </dv-full-screen-container>
  </div>
</template>

7.2 分散类布局组件

layoutBetween布局称为分散类布局，该布局主体分为左、中、右三部分，此布局两侧面板并非浮动面板，两侧面板占据主体布局空间，故主体内容空间受限，模型、GIS类场景使用此布局频率相对较低。
分散类组件布局效果如下：

注：此布局使用方法同基础类布局。

7.3 标题类组件

标题类组件目前积累两种类型，纯标题类组件、带一级标题类组件。两种类型作为基本标题类，都可根据实际需求进行灵活配置和拓展。

纯标题类组件效果：

带一级标题类组件效果：

注：具体使用参考6.2 如何使用组件章节

7.4 图表类

图表类组件参考Echart、DataV 等图表库，目前积累了四类基础图表，后续结合项目不断积累并迭代此模块内容。该类组件在src/components/chart`目录，分别有柱状图、柱线混合图、线性图、饼图。

目前基于现有DataV图表库做一定配置即可实现图表组件，详细图表配置可参考DataV文档http://charts.jiaminghi.com/config 。

此外还有一些设计美观的Echart图表示例，可参考https://www.makeapie.com/explore.html。

图表类组件效果可参考基础类布局效果图中的两侧图表。

7.5 功能按钮类组件

功能按钮类组件，一般会根据实际场景变化，故此块内容目前只需在左侧区域放置好占位内容即可，实际项目中会根据UI提供的素材，结合项目具体实现此块内容。

功能按钮类组件效果：

注：具体使用参考6.2 如何使用组件章节

7.6 弹窗类组件

弹窗类组件，基于Element弹窗封装，若项目中需要复用，可根据项目需求配置具体弹窗背景样式以及内容，弹窗背景图UI设计师会根据具体场景提供，弹窗中间内容区留有slot插槽，根据项目需求往插槽中完善具体内容即可。

弹窗类组件效果：

注：具体使用参考6.2 如何使用组件章节

7.7 表格类组件

表格类组件基于Element Table组件封装，表格风格样式可根据Table文档中Table Attributes调整。

Table表格其他配置参考https://element.eleme.cn/#/zh-CN/component/table

表格样式需要调整 cell-style、row-style、header-row-style、header-cell-style等属性。

注：具体使用参考6.2 如何使用组件章节即可

8. 主题风格篇

8.1 浅色(清新)主题

Element 官方默认提供一套浅色且基于蓝白色的主题（theme-chalk），该主题文件位于目录src/theme/light/light.scss下。

8.2 深色(科技)主题

为了更好的契合目前项目开发，根据此套浅色主题自定义配置了一套科技风格主题，该主题文件位于目录src/theme/tech/tech.scss下。

8.3 主题的内容

如下主题代码所示，定义好的变量值都可根据项目需求自定义修改，Element源码中将$--color-primary 、$--color-white经过混合产生其他色值，供组件库使用。

/*Write your variables here. 
All available variables can befound in element-ui/packages/theme-chalk/src/common/var.scss.
For example, to overwrite the theme color:
*/ 
$--color-primary: #409EFF !default;
$--color-white: #122242 !default;
$--color-black: #000000 !default;
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */

8.4 主题的使用

此项目中包含plugins目录，该目录下存放了一个element.js文件,文件内容如下所示，并且此文件最终会引入到项目入口文件main.js中

import Vue from 'vue'import Element from 'element-ui' 
import "../theme/tech/tech.scss"    // 科技风
// import "../theme/tech/tech.scss" // 清新风
Vue.use(Element)

8.5 主题的修改

1. 根据Element官方提供的Attributes配置修改，具体可参考各个组件API文档（https://element.eleme.cn/#/zh-CN/component）。
2. src/theme/tech/tech.scss 主题文件中单独调整组件样式变量。

如下为表格类组件所定义的变量,此处可灵活配置表格组件的各类属性。

/* Table----------------------- */
$--table-border-color: $--border-color-lighter !default;
$--table-border: 1px solid $--table-border-color !default;
$--table-font-color: $--color-text-regular !default;
$--table-header-font-color: $--color-text-secondary !default;
$--table-row-hover-background-color: $--background-color-base !default;
$--table-current-row-background-color: $--color-primary-light-9 !default;
$--table-header-background-color: $--color-white !default;
$--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, .12) !default;

$--table-border-color: red !default;   // 直接将变量值修改为颜色

注：以上两种样式调整方式优先采用第一种， 组件提供了API则直接使用API接口修改，若无，则考虑在主题文件中修改定义变量的值。

9. 多环境配置篇

目前针对平台多环境配置,采用vue多环境配置方案,目录结构中新增.env多环境配置文件,为了区分环境新增 .env.development、.env.production文件。

.env.development配置如下

VUE_APP_BASE_API = '/dev'VUE_APP_BASE_LOCATION = 'dev-url'  // dev-url为开发环境url

.env.production配置如下

VUE_APP_BASE_API = '/pro'VUE_APP_BASE_LOCATION = 'pro-url'  // pro-url为开发环境url

vue.config.js 配置如下，在运行打包命令时会根据命令将process.env.NODE_ENV设置为 development或者production,从而根据不同的模式去加载相关配置。

"scripts":
{
"serve": "vue-cli-service serve",
// 表示采用开发环境打包
"dev": "vue-cli-service build --mode development",
// 表示采用生产环境打包
"build": "vue-cli-service build --mode production",
"lint": "vue-cli-service lint"

根据以上配置定义项目运行命令规则：

// 本地开发运行
npm run serve 
// 开发环境打包
npm run dev      
// 生产环境打包
npm run build