工程目录规范

light工程必须遵守Light的目录规范。

Light目录规范

所有的定义和规定都为强制约束,任何不存在于目录规范中的资源都不会被lighting工具所处理。

路径 说明
/css 样式文件目录
/lib 三方模块或者全局通用模块
/images 图片资源
/ui UI组件,可在整个工程内复用
/api 外部接口访问封装
/app.js 应用的主入口,全局通用逻辑,应用编译入口
/index.html 应用运行入口
/project.json 应用配置文件

index.html

index.html为当前工程、应用的入口文件,其中包含当前工程的资源依赖和视图定义。

<!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=""/>
<title>light-Just For Fun</title>
</head>
<body>
<div id="main">
<view id="demo"/>
<view id="index"/>
<view id="index/about" parent="index"/>
<view id="index/contact" parent="index"/>
<view id="index/home" parent="index"/>
</div>
<script src="app.js"></script>
</body>
</html>

其中<view id="demo"/>代表定义了一个iddemo的视图,值得注意的是:视图的定义既是路由规则的定义也是业务模块的定义,视图的定义可以使用嵌套的结构代表嵌套的视图调用

index.html
  • index.html 中可以引入其他的JS资源
  • index.html 中除了light的自定义标签view外,与纯html文档并无二致
  • 所有的view标签所定义的视图必须被#main包含
  • html文档可以任意修改,不影响最终view标签的定义即可

lighting 除了支持上述单页工程以外,也支持多页工程(lighting-1.10.5+且type-vue@1.1.4+)。例如在根目录下有两个页面:index.html 和 page.html,则对应的入口文件分别为根目录下的 index.js 和 page.js,将页面文件资源的引入路径修改如下即可。

index.html
<script src="index.js"></script>
page.html
<script src="page.js"></script>
多页面工程

不支持不同页面下定义相同名称的视图。

app.js

app.js为当前工程的逻辑入口,代表了全局的通用的逻辑。

import App from "light"

App.filter("start",function (next) {
//启动拦截器
App.log("app started...");
next();
}).filter("route",function (from, to, next) {
//视图拦截器
App.log(`view changed:${from.path}--${to.path}`);
next()
}).start();
app.js
  1. app.js可以注册一些全局的拦截器和过滤器,或者引入一些全局通用的模块。app.js中的代码运行时在所有视图代码之前,也可以进行一些环境的限制和检查。
  2. start拦截器,及App.start()的逻辑不能出现在异步代码中,尤其是JSN模块开发时,应该尽快使App.start()执行完成。

view/

view/下的资源均为当前工程的一个视图,该视图在index.html中定义。

light视图

所有的light视图都是一个vue组件。

/view/index.vue
<template>
<div>
Hello,World !
</div>
</template>
<script>
export default {
data(){
return {};
},
props:[]
}
</script>
<style lang="less">
</style>

project.json

网站的 配置 信息,您可以在此配置大部分的参数。plugins字段中,jsnative是 JSNative 项目的标志。

project.json
{
"project":"lightProject",
"version":"0.0.1",
"desc":"Just For Fun",
"type":"vue",
"link_id":"",
"plugins":["jsnative"],
"env":{
"default":{
"log_level":"debug"
},
"product":{
"log_level":"error"
}
}
}

lib/

lib/目录下存放当前工程的三方模块或者全局通用模块,该目录下可以存在package.json文件用于定义npm包的依赖。

npm模块包

lib目录下应该只存在当前工程运行时的依赖包,如果使用了npm当中的模块,应该确保这些模块都是运行时使用的。不应该引入编译时处理源代码资源的npm包,比如webpack,babel等。