当前位置:首页 > webpack 配置 arttemplate基本用法 npm 安装arttempalte

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

发布于 2018-11-06 阅读 354 次 webpack

第一步安装

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>

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