前端组件化
1. 前言
前端组件化基于UI组件化文档设计方案，通过模块化、组件化思想实现前端组件化。此文档主要介绍如下四部分内容：
- 模块化开发方案
- 项目灵活配置方案
CSS主题样式方案- 前端独立部署方案
代码可视化相关文档见：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方式引入即可，具体操作分为以下三个步骤:
- import方式引入组件
import ComponentA from './ComponentA'
- 模块系统中局部注册
export default {
components: {
ComponentA
},
}
- 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 标题类组件
标题类组件目前积累两种类型，纯标题类组件、带一级标题类组件。两种类型作为基本标题类，都可根据实际需求进行灵活配置和拓展。
纯标题类组件效果：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aQlY9QAK-1651333881906)(https://note.youdao.com/yws/res/1674/WEBRESOURCE8a167054b0ac933e633df8ef140d58cf)]](https://i-blog.csdnimg.cn/blog_migrate/a9ec70a57ad95bf7d253479113cabced.png)
带一级标题类组件效果：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aQlY9QAK-1651333881906)(https://note.youdao.com/yws/res/1674/WEBRESOURCE8a167054b0ac933e633df8ef140d58cf)]](https://i-blog.csdnimg.cn/blog_migrate/822d2131b9ef9480d8fbe12ec7e88e6e.png)
注：具体使用参考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插槽，根据项目需求往插槽中完善具体内容即可。
弹窗类组件效果：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7QFcINA7-1651333881907)(https://note.youdao.com/yws/res/1683/WEBRESOURCE36628cf296b3776af1952d6b21427e8b)]](https://i-blog.csdnimg.cn/blog_migrate/da9af1ff12578db064564701aa003395.png)
注：具体使用参考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 主题的修改
- 根据
Element官方提供的Attributes配置修改，具体可参考各个组件API文档（https://element.eleme.cn/#/zh-CN/component）。 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
扫一扫
1486
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
