如何用JDL前端框架快速开发-京东云开发者社区

# 前言
1990 年，蒂姆·伯纳斯-李（Tim Berners-Lee）在NeXT电脑上发明了一个所见即所得的超文本浏览/编辑器，至此第一个Web浏览器的诞生；1991 年，WWW诞生，这标志着前端技术的开始。
![](//img1.jcloudcs.com/developer.jdcloud.com/ce9c846c-bc31-49c5-9fcc-c7c1826a784d20210413143847.png)
纵观前端近20多年的发展史中，从最早的纯静态页面到JavaScript的诞生，从PC端到移动端，从依赖后端到前端可自由打包开发的形式。

从研发的角度看，我们经历了前端的初兴起、浏览器战争、Prototype革新、三大框架割据，这其中均是由国外开发者主导，直到如今的小程序时代，才是中国开发者独创的。这是漫长的技术储备下的成果，最终促成了良好的技术成长收获。期间的前端发展之路也崎岖艰难。

# 模板工程简介及使用介绍

## **基础介绍**
 - Vue 是什么
ⅰ.Vue是一套基于MVVM设计模式（M-数据、V-模型），用于构建用户界面的渐进式框架， 被设计为可以自底向上逐层应用，其核心只关注视图层，易于上手，便于与第三方库或既有项目整合。

- Vue 两大核心
   **ⅱ.Vue的数据驱动：**数据改变驱动了视图的自动更新，传统的做法是需要手动改变DOM来改变视图，Vue只需要改变数据就会自动改变视图，不需要关注DOM的更新，这就是MVVM思想的实现。
 **ⅲ.视图组件化**：将整个网页拆分成一个个区块，每个区块我们可以看作成一个组件，网页由多个组件拼接或者嵌套组成。
 
<center>![](//img1.jcloudcs.com/developer.jdcloud.com/732866dc-5a44-457e-be92-8d2f2046593720210413144448.png)</center>

- Vue 特点
ⅰ.简洁、轻量、快速、数据驱动、模块友好、组件化

- Vue组件化思想
ⅱ.组件系统是一种抽象的，允许我们使用小型、独立和通常可复用的组件构建大型应用，一个Vue组件本质其实就是一个 Vue 实例，所以业务抽象、组件化非常重要。

<center>![](//img1.jcloudcs.com/developer.jdcloud.com/d233916c-d5fb-4856-be9f-763267a4b97320210413144715.png)</center>

## **模板工程简介**

- PC端通用框架是基于 Vue框架 和 Lui 并整合京东物流自有的技术特点及视觉元素而实现。该框架定位是解决通用后台系统前端的集成方案，内置ERP登录，类USF权限管理，Passport，动态路由，物流网关，Axios等常用功能，并基于设计完成多套统一风格的模板，可以帮助技术快速搭建项目。

<center>![](//img1.jcloudcs.com/developer.jdcloud.com/0d9b59d7-ff0d-4404-b5a9-9f224ace1a4520210413144953.png)</center>

<center>![](//img1.jcloudcs.com/developer.jdcloud.com/77229528-3b9b-4738-be15-7c23c0deb45520210413145008.png)</center>

- **架构设计**

<center>![](//img1.jcloudcs.com/developer.jdcloud.com/4b69e37a-75da-4168-9440-b3f8abbf415920210413145249.png)</center>

- **设计目标**
ⅰ.适用于PC/M端等通用项目
ⅱ.对开发者友好，学习成本更低，效率较高
ⅲ.UI组件统一，视觉效果可保持一致

- **目录结构说明**

<center>![](//img1.jcloudcs.com/developer.jdcloud.com/255e964a-9e4f-43de-a066-75920d0d735420210413145504.png)</center>

- 规范目录结构，统一工程风格
- Main.ts作为入口文件，管理所有插件入口
- .env作为环境变量配置，打包时会自动注入变量
- Api作为接口收敛处，统一管理，方便处理出入参
- Fliter全局校验拦截器，一处注入，全局共享
- Router管理器，前端路由深度集成
- .eslint/tsconfig前端代码规范配置，优化性能规避Bug

- **快速上手**

<center>![](//img1.jcloudcs.com/developer.jdcloud.com/a8fe403c-e3bf-46a4-a89e-85a236af89e220210413145626.png)</center>

<center>![](//img1.jcloudcs.com/developer.jdcloud.com/0cc3d5de-d9c2-46c8-bb78-dcecff03e3ef20210413145640.png)
</center>

- 注：Pandora-CLI（Star-CLI）正式升级为JDL-CLI

- **登录&&权限流程图**

![](//img1.jcloudcs.com/developer.jdcloud.com/3aeddf3c-a615-454a-809e-e1da246173a020210413145736.png)

<center>![](//img1.jcloudcs.com/developer.jdcloud.com/a7fb17be-8f6c-4f24-b39a-62021ba90f5120210413145752.png)
</center>

- 注：前端采取对usf较为友好的数据结构

- **前后端数据通信**

<center>![](//img1.jcloudcs.com/developer.jdcloud.com/3907b325-3739-48b0-b26a-2eeb461b0d9020210413145904.png)
</center>

- **举个例子**

<center>![](//img1.jcloudcs.com/developer.jdcloud.com/8b5f83fa-a8f5-423f-8a34-84aa21d13f2b20210413145934.png)</center>
<center>![](//img1.jcloudcs.com/developer.jdcloud.com/e79c76fc-d722-4634-ace4-7ec40264fbfb20210413145958.png)</center>

- 注：为解决同步问题，引入 Async await ，让代码可读性更好

## **如何开发一个页面**

<center>![](//img1.jcloudcs.com/developer.jdcloud.com/5b8a4b65-f96a-4881-bd4d-6467c54823cd20210413150425.png)
</center>

- **代码通用规范**

a.在script顶部写组件的使用注释，需要包含: 组件名称、作者erp、日期、功能描述、使用方法；

b.组件逻辑与样式分开，分为index.vue，与index.scss；

c.组件文件名首字母必须大写，需要指定组件name，首字母大写，常见目录结构如下：
<center>ⅰ.WrapperBox（组件目录名）
     1.index.vue
     2.index.scss</center>
	 
d.注释写在代码行上方，尽可能简洁明了；

e.函数之间需要有换行；

f.代码顺序：prop → data → computed → watch → methods → [vue生命周期函数]；

g.属性尽量层级简化：如label，labelWidth是两个独立属性，而不是定义一个对象 options = { label, labelWidth }；

h.不能有组件自身不可控的变量或方法：如：Vuex数据流，window.eventBus.on('xxxx‘)等；

i.兼容性检查Chrome、IE9+、safari等浏览器；

- **Vuex、EventBus、组件通信使用介绍**

- Vuex 是什么

ⅰ.Vuex 可以理解为是一个状态管理容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：

ⅱ.Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

ⅲ.你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

<center>![](//img1.jcloudcs.com/developer.jdcloud.com/4d883e13-1670-4fbf-ac59-bcad108eca9f20210413150904.png)</center>

![](//img1.jcloudcs.com/developer.jdcloud.com/648b7c7c-6a1d-458a-b94d-dc253ea934e720210413150917.png)

![](//img1.jcloudcs.com/developer.jdcloud.com/7ab34b9b-a75d-44b0-abe7-7401fbc79cc620210413150934.png)

![](//img1.jcloudcs.com/developer.jdcloud.com/af3bf1da-5251-41ed-bafa-4d636f43f8bb20210413150948.png)

![](//img1.jcloudcs.com/developer.jdcloud.com/c145a94c-3c53-4628-bc70-4a7d098a003120210413151000.png)

- EventBus 是什么
a.事件总线。在Vue中可以使用EventBus来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件。

- 父子组件通讯原则
b.为了提高组件的独立性与重用性，父组件会通过props向下传数据给子组件，当子组件有事情要告诉父组件时会通过$emit事件告诉父组件。如此确保每个组件都是独立在相对隔离的环境中运行，可以大幅提高组件的维护性。

- 子子组件通讯原则
c.父子组件通信可以通过props进行传递，但如果兄弟组件之前通信如果采用$emit实现会变得异常复杂，这时候就可以引入EventBus来解决。

<center>![](//img1.jcloudcs.com/developer.jdcloud.com/e8e9e922-4411-4fde-a6b3-888d51ac27f220210413151119.png)</center>

# PC端组件库
Lui是基于Element结合物流自有元素的二次开发——http://lui.jd.com/

![](//img1.jcloudcs.com/developer.jdcloud.com/e73b0f3d-137b-45fa-8df3-76f01b78e5aa20210413151213.png)

![](//img1.jcloudcs.com/developer.jdcloud.com/83eb085b-bb8e-499f-8573-fd42cfcfbb3b20210413151229.png)

# 常见问题及解决方案
![](//img1.jcloudcs.com/developer.jdcloud.com/7602f7bf-e80a-4e4c-b164-e50b7559715820210413151338.png)

------------

###### 自猿其说Tech-JDL京东物流技术发展部
###### 作者：用户产品部-商家研发组 骆彬彬