webpack 配置 arttemplate基本用法 npm 安装arttempalte

第一步安装

npm i art-template  art-template-loader  --save-dev

配置webpack loader

{
    test: /\.art$/,
    loader: "art-template-loader"
},

在入口js文件引入

注意这里要引入web版，require(‘art-template’)引入的是服务器端版本，官方说是nodejs版，我个人觉得对于大部分人会有点歧义;
const template = require(‘art-template/lib/template-web’);

引入模板

var render = require('../../template/index/slide.art');//这里返回是一个渲染方法，当时我以为是字符串，懵逼半天

渲染回填

var html = render({value: 'aui'})//返回字符串
console.log(html)
$('.J-silde-render').html(html);

模板里面也可以用include引入其他片段
slide.art

{{include './header.art'}}

其他方式

也可以直接在html文件里面用es6的模板，调用tempalte方法来渲染具体如下：

<script id="test" type="text/html">
    <%for( i = 0; i < content.length; i++) {%>
    <h1><%=content[i].title%></h1>
    <p>条目内容 : <%=content[i].list%></p>
    <%}%>
</script>
<script>
    var html = template('test',data);
    $('.J-silde-render').html(html)
    </script>

最后祝大家少走弯路，官方文档看的我有点云里雾里，希望这篇文章能让大家快速入门，欢迎留言拍砖。