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

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

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

第一步安装

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

配置webpack loader

  1. {
  2. test: /\.art$/,
  3. loader: "art-template-loader"
  4. },

在入口js文件引入

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

引入模板

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

渲染回填

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

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

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

其他方式

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

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

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