工程目录规范 | Light文档

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"/>代表定义了一个id为demo的视图，值得注意的是：视图的定义既是路由规则的定义也是业务模块的定义，视图的定义可以使用嵌套的结构代表嵌套的视图调用。

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

app.js可以注册一些全局的拦截器和过滤器，或者引入一些全局通用的模块。app.js中的代码运行时在所有视图代码之前，也可以进行一些环境的限制和检查。

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等。