快速开发之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-cli和vue就不做过多描述，下次有时间单开一篇总结下，之所以提到vue-cli是因为安装light以后也可以快速构建应用，对开发者来说无疑不是一种福音。安装之前我们先安装node,安装过程不说了，对应版本安装就好，我们需要用到npm它是随同NodeJS一起安装的包管理工具，不知道这个的朋友，赶紧去学习下

安装

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的开发规范，下面看下如何运行

使用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的介绍到此为止

项目目录

|
|-- 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 ----------- 工程配置

项目效果图

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

总结

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

木子李先生

一只前端汪