开发环境准备

创建开发工程

lighting以基于模板的方式创建初始的开发工程。

其中H5工程相关联的模板类型主要是vue,此模板类型包含lighting套件的整套H5单页应用的开发流程和技术方案,使用此类型初始化工程只需如下的指令即可:

$ light create -t vue
Lighting:您的工程名字是什么?: (light)
Lighting:您的工程版本是什么?: (0.0.1)
Lighting:请简单描述一下当前的工程:: (Just For Fun)

lighting开发工具会以交互询问的方式补全其所必要的信息,最终创建出来的目录结构为如下图所示,我们输入的工程名字及时目录名称,两者等同。

$ tree light/
light/
│ app.js
│ app.less
│ index.html
│ project.json

├─css
│ reset.css
│ style.less

├─images

├─lib
│ package.json
│ px2rem.js

├─ui
│ ui.vue

└─view
│ index.vue

└─index
about.vue
contact.vue
home.vue

5 directories, 13 files

为空白工程添加视图声明

Lighting工具使用视图标签的方式来定义视图,通过对视图的定义的解读来生成必要的模版代码,减少开发者对模板的记忆成本,以及提高整个应用开发的效率。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no,email=no" name="format-detection" />
<meta name="Keywords" content=""/>
<meta name="description" content=""/>
<link rel="stylesheet" href="app.css">
<title>TEST-Just For Fun</title>
</head>
<body>
<div id="main">
<view id="index"/>
</div>
<!--<snippet id="footer"/>-->
<script src="app.js"></script>
</body>
</html>
注意事项
  1. 所有的view标签都必须在div#main这个容器之内定义
  2. 默认空白工程自带了一个demo的view,如果不需要请移除,以免对代码关系产生困扰
  3. 在html文件中依然可以使用snippet标签,会从html/snippet查找目标文件

代码生成

通过编辑生成目录中的index.html文件,可以新增视图定义;并通过light gen根据此视图定义生成对应的视图文件以便开发使用。

这一步的操作会根据view的声明来生成对应视图的vue文件,该文件存在于view目录下,生成的过程中会检查该目录下对应的文件,如果文件存在的情况下会提示开发者文件已经存在需要的信息,如果需要覆盖同名的视图文件,可以在执行命令的同时添加-o选项。

自动生成出来的视图文件是标准的vue文件,具体的内容是类似这样:

abel@abel-pc /t/TEST> cat view/demo.vue
<template>
<div>
Hello,World !
</div>
</template>
<script>
export default {
data(){
return {}
}
}
</script>
<style lang="less">
</style>

编译与运行

当代码生成完成后,程序就已经完整可运行的状态,通过下面的指令可以将工程的源代码编译。

light release -wb
[2019-03-29 10:08:47][INFO] 清除/tmp/lighth51553825327793-7479548555245577目录
[2019-03-29 10:08:47][INFO] 拷贝/tmp/lighth5到/tmp/lighth51553825327793-7479548555245577目录
[2019-03-29 10:08:47][INFO] 阶段:prepare,调用插件type-vue@1.1.17开始
[2019-03-29 10:08:47][INFO] 阶段:prepare,调用插件type-vue@1.1.17成功
[2019-03-29 10:08:47][INFO] 处理资源装配:index
[2019-03-29 10:08:47][INFO] 处理脚本资源注入:index
[2019-03-29 10:08:47][INFO] 阶段:build,调用插件type-vue@1.1.17开始
[2019-03-29 10:08:50][INFO] 阶段:build,调用插件type-vue@1.1.17成功
[2019-03-29 10:08:50][INFO] 已开启本地资源监听...
[2019-03-29 10:08:50][INFO] 资源编译成功
注意事项
  1. -w选项代表对当前目录源代码的变更开启监听
  2. -b选项代表开启一个http服务器,并打开系统的默认浏览器
  3. 最后编译的数据目录上:在linux系统下位于 /tmp目录,在window系统下位于C\Users\<用户名>\Local\Cache目录下(总的来说,是位于当前操作系统的临时目录里面,为了方便清理,防止对当前系统资源的过多占用),具体的目录可以通过下面的命令来查看:node -e “console.log(os.tmpDir())”

日志信息详细罗列出来了整个编译的流程,通过日志信息,可以看出工具正常完成了项目的编译,并开启了一个以3000为端口的http服务。

构建工具会自动打开浏览器,并打开项目的http地址,至此每一次对源代码的修改都会触发页面内容的自动编译和热更新,可以使开发者在无感知的情况下快速开发。