脚本宝典收集整理的这篇文章主要介绍了使用React来开发类Vue单文件组件范式的开发框架Lesx新鲜出炉,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
gIThub地址:lesx-example
Lesx@H_777_10@提供了一种开发范式,可以让开发者使用类似vue的单文件模式来开发React应用,做到了
style/template/script
三元素分离。它提供了一个webpack loader,可以将下面的DSL:
<style>
a {
color: red;
}
</style>
<template>
<div>
<a onClick={() => {
alert(1);
}}>点我</a>
{console.log(this.props)}
<If condition={ this.props.valid }>
<div>{this.state.name}</div>
</If>
<Button type="Primary" onClick={() => {
alert('I am an antd button!');
$setState({
name: 'a new name',
});
}}>antd button</Button>
</div>
</template>
<script>
module.exports = {
props: {
valid: true
},
state: {
name: 'xiangzhong.wxz'
},
};
</script>
JSX
基础语法;style/template/script
三元素分离,方便代码维护;script
中注入的方法及变量在DSL中可以通过this.xxx
的方式使用;script
中注入的方法会被自动绑定到this
作用域;antd
组件(可以配置为其他UI组件库),无需引入,可以直接在DSL中使用antd所有的组件;UI library组件
,并按需打包,而不会把整个组件库全部打包进去,最小化打包后的代码体积;components
属性,可以引入组件库没有的其他组件(自定义或者第三方的);style
支持自定义语言(css/sass/less),默认sass
;svelte
,也许后面会改成自研组件式开发框架而不是基于React
。{
test: /.lesx$/,
loader: 'lesx-loader',
query: {
loaders: {
js: 'babel',
css: 'style!css',
sass: 'style!css!sass'
},
uiLib: {
libName: 'antd',
libDirectory: 'lib'
}
}
}
以上是脚本宝典为你收集整理的使用React来开发类Vue单文件组件范式的开发框架Lesx新鲜出炉全部内容,希望文章能够帮你解决使用React来开发类Vue单文件组件范式的开发框架Lesx新鲜出炉所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。