快速开发之Light

  |  
 阅读次数

前言

最近写了一个项目,用的是公司研发中心开发的一套快速开发平台——Light平台应该都没接触过这个平台,我也是第一次接触使用,觉得有必要总结写一下。项目不是开源的,我放到github上面托管了,由于公司项目设置了私有,就不公开了,结合提前准备的图文说下light感兴趣的小伙伴可以去Light官网查看更详细的文档Light官网


Light简介

先说下Light吧,Light是公司研发中心借鉴vue的生态系统开发的一个快速开发的平台、对公司来说为了做到统一方便管理,对开发者来说做到不用搭建开发环境、不用配置构建、压缩…等一系列繁琐的配置。只需要按照light的开发规范一切就是那么简单(其实我用起来并不简单、bug还是有,总要有一个成长的过程…),它是完全基于vue的,也就是说如果你有过使用vue的项目经验,那么使用这个是很不费力气的,有人说模仿vue这不是抄袭么?再眼下的互联网时代,技术革新那么快,开发要的是效率,公司看的是收益,一点也就没必要再去计较,现在已经成为恒生的标准。


Light优势

这是一款适合H5快速开发的SPA框架构建工具,为什么说它既是框架又是构建工具呢?我们都知道前端技术推陈出新,从搭建环境到开发到构建到测试、发布、部署这一系列的配置并不简单,上面简介中说到,对开发者来说你不用再配置这些,只需要安装light,然后就自己的撸代码就好了,构建、发布都依赖light开发者就不需要在这方面下功夫了。再说下SPA,和其他主流框架一样,light也支持单页面开发,如果你使用过vue-router,那么好,你也可以按照vue-router来实现路由跳转,我是建议按照light,light的路由和其他具体的api可以查看上方的官网。
了解API
前端的资源优化一直是重点,light也做了处理并且是不需要开发者做配置的
前端优化策略
Light也是一个平台,因为他能做的事情比较多,这也是与其他框架最大的不同之处,项目的交付也可以使用平台
使用light平台发布H5服务

项目中使用Light

light安装使用

使用过vue的应该都知道vue-cli,它是快速构建单页面应用的脚手架,这是官方推出的,这里对vue-clivue就不做过多描述,下次有时间单开一篇总结下,之所以提到vue-cli是因为安装light以后也可以快速构建应用,对开发者来说无疑不是一种福音。安装之前我们先安装node,安装过程不说了,对应版本安装就好,我们需要用到npm它是随同NodeJS一起安装的包管理工具,不知道这个的朋友,赶紧去学习下

安装

1
2
3
4
5
npm install lighting -gd --registry=https://registry.npm.taobao.org
这里我们使用了淘宝的镜像,安装完成以后
light -v如果出下版本号和`light`的logo那就是安装好了
light -h (查看支持的指令和用途)
light <command> -h 查看指令支持的参数用途

创建项目

如果你已经看了light官网,我觉得这里就可以略过了,创建项目很简单,只需要一个命令

1
light create -n ProjectDemo(项目的名字)

自动生成的环境

我们看下开发的入口页面
开发入口页面
入口逻辑
入口逻辑
入口样式
入口样式

上面的入口文件都是自动生成的,个性化的配置熟悉以后可以自己配置,看完这些你可能有点懵,别急我们来看index.html你可能会觉得这个view是啥?我咋没见过,我的其他view怎么创建,我们看下视图开发模块
视图开发模块view

你没看错就是这么简单,入口文件里面定义好视图模块,命令行light gen会在你的view视图目录下自动生成视图文件,light gen -o这个慎用,它会把你的视图初始化。
开发视图模块view/.vue
看这里熟悉vue的朋友肯定会觉得很亲切,要不是之前这个项目使用vue写的,估计我现在已经哭晕再厕所了,如果你有一个项目是用的vue,你可以尝试下玩玩light

运行调试

开发环境下如今的前端开发没有热部署那是一件很痛苦的事情,手动刷新的时代过去了,效率太慢,没错虽然你只是安装了light也没有做任何配置,也看不到配置文件,这就是light的一大优势,不需要配置繁琐的配置,只要你按照light的开发规范,下面看下如何运行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
使用light release 指令进行代码集成、调试
light release -wb
参数说明:
-w 启用代码变更监测
-b 启动并打开浏览器(chrome)
-u 启用资源压缩混淆
-c 启用资源合并
-s 启用资源引入后缀(防止cache)
-p 打成zip程序包
--product 启用生成策略(合并、压缩、后缀)

light release -wbuc 参数还可以混合使用能明白这个指令的意思吧
注意事项:
1.打包参数不要和启动参数同时使用;
2.生产策略已经代替其他三个参数,所以不要重复使用;
3.启动并打开浏览器默认使用chrome,建议安装;
4.启用代码变更坚听时,代码修改保存后会自动刷新浏览器输出;
5.变更监听下,增加的视图标签,会自动生成配套的代码结构逻辑;

进阶

  • 使用异步视图模块,还记得刚才的入口页面怎么创建view么?使用方法<view id="" async="true" /> 是否采用异步,取决于模块数量、大小及应用的总大小、业务相关性。
  • 使用工程依赖,借助工程依赖,可有效建立共有资源的复用管理机制,业务工程更聚焦自身代码逻辑。使用方法:
    project.json 配置dependency:[parh:""]注意事项:
    工程依赖下除了当前工程存在的文件以外,以来的工程中的资源都会参与进来(相当于copy without override)
  • 使用环境变量编程使用环境变量
  • 使用组件编程,用过vue的朋友应该都知道这个组件编程
  • 使用嵌套视图嵌套视图
  • 使用过滤器过滤器编程
    light的介绍到此为止

项目目录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
|-- api -------------------- 数据请求逻辑
|-- lib -------------------- 公共依赖库
| |-- light.build.js ------ 针对vux做的个性化配置
| |-- package.json -------- vux的依赖配置
|-- style ------------------ 样式表&&字体图标
| |-- icon ---------------- 字体图标文件夹
| |-- animate.css --------- 动画样式表
| |-- check.css ----------- 单选复选个性化样式表
| |-- common.css ---------- 公共样式表
| |-- layer.css ----------- layer弹框样式表
| |-- vuxReset.css -------- 重置vux库的样式
|-- image ------------------ 图片资源
|-- ui --------------------- 自定义ui控件
| |-- countDown.vue ------- 倒计时组件
| |-- footerBar.vue ------- footer组件
| |-- shoplist.vue -------- 商品列表组件
| |-- ...
| |-- ...
| |-- ...
|-- util ------------------- 公共方法库
| |-- layer.js ------------ layer弹框脚本
| |-- regularUtil.js ------ 正则
| |-- rem.js -------------- rem布局多屏适应
|-- view ------------------- 视图模块
| |-- accountBalance.vue -- 账户余额页面
| |-- disclaimer.vue ------ 免责声明页面
| |-- home.vue ------------ 首页
| |-- fiancial.vue -------- 金融超市页面
| |-- login.vue ----------- 登陆页
| |-- life.vue ------------ 生活页
| |-- myAssets.vue -------- 我的资产
| |-- ...
| |-- ...
| |-- ...
|-- app.css ---------------- 应用入口样式
|-- app.js ----------------- 应用入口逻辑
|-- index.html ------------- 应用入口页面
|-- project.json ----------- 工程配置

项目效果图

项目还没做完,只有部分功能,随便展示下,功能简单。


总结

用了几天时间完成了这篇文章,也算是我第一篇比较认真对待的文章,以后每一篇都用心来写,本来是不打算配图的,打算用代码的形式来介绍,但是考虑到这是一个百分之九十九都不知道的平台,还是做成图文形式更直观更容易理解,实在是不好意思,项目的源码不能公开,公司的项目,这里只看下结构和效果图。