十分钟起步

创建开发工程

安装 Lighting 完成后,请执行下列命令,Lighting 将会在指定文件夹中新建所需要的文件。

$ light create <folder>
$ cd <folder>

新建完成后,指定文件夹的目录如下:

.
├── app.js
├── app.less
├── css
│   ├── reset.css
│   └── style.less
├── images
│   ├── about-active.png
│   ├── about.png
│   ├── contact-active.png
│   ├── contact.png
│   ├── home-active.png
│   ├── home.png
│   ├── more.png
│   └── scan.png
├── index.html
├── lib
│   ├── package.json
│   └── px2rem.js
├── project.json
├── ui
│   └── ui.vue
└── view
├── index
│   ├── about.vue
│   ├── contact.vue
│   └── home.vue
└── index.vue

运行基础模板工程

工程创建完成后,可以直接在工程根目录下执行以下指令来运行。

$ light release -wb

命令执行时,控制台会打印项目的编译日志信息,正常情况下,看到资源编译成功这条日志输出就代表项目正常编译,lighting会帮助开发者打开默认浏览器并且主动将访问地址定向到当前工程的服务地址。

[2019-05-17 10:54:29][INFO] 清除C:\Users\HSPCAD~1\AppData\Local\Temp\a1558061668854-1533026569448439目录
[2019-05-17 10:54:29][INFO] 拷贝C:\Users\hspcadmin\Desktop\a到C:\Users\HSPCAD~1\AppData\Local\Temp\a1558061668854-1533026569448439目录
[2019-05-17 10:54:29][INFO] 阶段:prepare,调用插件type-vue@1.1.19开始
[2019-05-17 10:54:29][INFO] 阶段:prepare,调用插件type-vue@1.1.19成功
[2019-05-17 10:54:29][INFO] 处理资源装配:index
[2019-05-17 10:54:29][INFO] 处理脚本资源注入:index
[2019-05-17 10:54:29][INFO] 阶段:build,调用插件type-vue@1.1.19开始
[2019-05-17 10:54:36][INFO] 阶段:build,调用插件type-vue@1.1.19成功
[2019-05-17 10:54:37][INFO] 已开启本地资源监听...
[2019-05-17 10:54:37][INFO] 资源编译成功

推荐操作系统将chrome设置为默认浏览器,在项目打开后按F12键后选择移动端模拟模式,就可以模拟在真实设备中的用户访问效果了。

如图左侧是移动端效果预览效果,右侧为控制台日志输出。

右侧的二维码可以直接被微信等扫描,扫描后会在手机端打开页面,即可预览在真实设备的运行效果。

修改代码后预览效果

对工程内任何源代码文件的修改都会触发工程的二次编译,lighting会帮助开发者增量编译被修改的内容,快速的编译后会动态更新页面展示的内容。

打包与发布部署

工程开发完成后,可以直接在工程根目录下执行以下指令来对当前工程项目进行打包。

$ light release -p --product
[2019-05-17 10:57:54][INFO] 清除C:\Users\HSPCAD~1\AppData\Local\Temp\a1558061874074-37907633195518975目录
[2019-05-17 10:57:54][INFO] 拷贝C:\Users\hspcadmin\Desktop\a到C:\Users\HSPCAD~1\AppData\Local\Temp\a1558061874074-37907633195518975目录
[2019-05-17 10:57:54][INFO] 阶段:prepare,调用插件type-vue@1.1.19开始
[2019-05-17 10:57:54][INFO] 阶段:prepare,调用插件type-vue@1.1.19成功
[2019-05-17 10:57:54][INFO] 处理资源装配:index
[2019-05-17 10:57:54][INFO] 处理脚本资源注入:index
[2019-05-17 10:57:54][INFO] 阶段:build,调用插件type-vue@1.1.19开始
编译中 [====================] 100% (9.2 秒)

Build completed in 9.233s

[2019-05-17 10:58:05][INFO] 阶段:build,调用插件type-vue@1.1.19成功
[2019-05-17 10:58:05][INFO] 阶段:packager,调用插件type-vue@1.1.19开始
[2019-05-17 10:58:05][INFO] 阶段:packager,调用插件type-vue@1.1.19成功
[2019-05-17 10:58:05][INFO] 开始资源打包
[2019-05-17 10:58:05][INFO] 打包结果:C:\Users\hspcadmin\Desktop\a-0.0.1_20190517.zip,大小:172.43KB
[2019-05-17 10:58:06][INFO] 资源编译成功

打包完成后会在工程的同级目录下生成以相应工程名命名的zip包文件,此文件既是最终的交付物,可以部署在任意的静态资源服务器中,比如nginx,jetty等。