art-template模板
配置
1.下载 渲染模块
cnpm i --save art-template express-art-template
2.app.js 配置
// 导入模板渲染
// 模板所在位置
app.set("views",path.join(__dirname, 'views')) //设置模板所在的位置，默认是当前目录平级的views文件夹 根目录下创建一个views文件夹
app.set('view options', { // 生产环境关闭缓存
debug: process.env.NODE_ENV !== 'production'
});
// 默认模板后缀，返回时不用写后缀
app.set("view engine","art")
// 当使用 .art 时使用具体的模板语法
app.engine("art",require("express-art-template"))
// 配置静态目录
app.use(“/public”,express.static(path.join(__dirname, 'public')))
加上“/public”这个可选配置项后，访问静态，都需要加上 /public
示例：请求css: /public/css/index.css
3.将js css img等放到public下
4.新建views 文件，并将 html文件 放到 views下，将 html改为 art
5.做具体的模板设置
参考模板
https://gitee.com/weixijin_177/middle_node_moban
模板语法
<body>
<h3>
直接渲染--{{name}}
</h3>
<p>
条件渲染--当前number值{{number}}---{{if number>10}}
<span>
我是只有number大于10才会渲染的数据
</span>
{{/if}}
</p>
<ul>
{{each data}}
<li>
<span>
{{$value.name}}
</span>----
<span>
{{$value.quantity1}}
</span>
</li>
{{/each}}
</ul>
<button class="btn">加载更多</button>
</body>
如何使用vue来作为模板渲染
1.下载依赖
cnpm i axios --save
2.layout.art 中统一导入和混入模板
<div id="app">
{{block "main"}} {{/block}}
</div>
<script src="/node_modules/vue/dist/vue.js"></script>
<script>
// 全局混入将影响全部的vue实例
Vue.mixin({
delimiters: ['{%', '%}'], // 中间有个空格
})
</script>
3.具体使用
<script>
;
(() => {
const app = new Vue({
el: "#app",
data() {
return {
}
},
methods: {
},
computed:{
}
})
})()
</script>
8494
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
