如何自定义UI控件

安装方式

light plugin -a vue

详细说明

lighting-plugin-vue可以让工程支持vue的单文件组件。

所谓单文件组件，是指html、css、js在同个文件里，并且放在任何工程内都看可以运行。

使用lighting-plugin-vue有几个简单的规则：

基于规范的考虑，可以作为组件使用的vue文件应该只存在于二级目录，也就是src的直接子目录，推荐使用ui作为统一的目录名
所有的vue文件都会合并编译为vue-components.js，所以使用时还需要在html文件中引入此js
组件最终会被注册为以目录和文件名相区分的组件，如src/ui下有一个hellow.vue的文件，这样组件使用起来就类似：<ui-hellow></ui-hellow>

示例

src/ui/hellow.vue

<template>
    <div class="hellow">
        <p>{{ greeting }} World!</p>
    </div>
</template>
<script>
    export default{
        data:function () {
            return {
                greeting:"Hellow",
            }
        },
        watch:{},
        methods:{},
        ready:function () {
        }
    };
</script>
<style>
    .hellow{ width:100px; height:100px; background:#ccc;}
</style>

在对应的html/page目录下 src/html/page/index.html 引入vue-components.js

<script src="vue-components.js"></script>

src/html/view/demo.html

<div id="demo" style="display:none;">
    <ui-hellow></ui-hellow>
</div>

project.json

{
"project":"demo",
"version":"0.0.1",
"desc":"Just For Fun",
"type":"light-1.0",
"plugins":["vue"]
}

打包编译时可以使用指令： light release -e(project.json配置有plugins的情况下) 或者 light release -e vue

以下提供实例代码：

源码下载地址

组件开发

如何自定义UI控件

安装方式

详细说明

示例