开发环境准备

创建开发工程

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，如果不需要请移除，以免对代码关系产生困扰

代码生成

通过编辑生成目录中的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地址，至此每一次对源代码的修改都会触发页面内容的自动编译和热更新，可以使开发者在无感知的情况下快速开发。