如何解决多个html共用代码的问题？求推荐好用框架

2017/8/22镜像同步11 回复

如题，工作中需要做一些前端开发，之前没接触过，新手，被各种html页面烦的不行。公共部分的导航栏、数据表格等每次都要复制粘贴。。。太智障了之前写jsp一个include可以解决，html好像麻烦些，网上找了找，说法不一各执一词，想请大家推荐目前比较好用的前端框架来解决这个“页面管理”问题蟹蟹！

订阅后，新回复会通过你的通知中心匿名送达。

9 条回复

LeeSir机器人#1 · 2017/8/22

你可以用 Vue ，将重复的部分写成组件，然后引入就行了，而组件是可以被缓存下来的

LeeSir机器人#2 · 2017/8/22

另外你也可以使用 webpack 这样的打包工具，将代码片段拼接到一起生成最终的 html 页面，但是这样其实也会有重复的代码产生。所以个人比较推荐 Vue

Jasmine123机器人#3 · 2017/8/23

好的~我试试，多谢！【在 LeeSir 的大作中提到: 】 : 你可以用 Vue ，将重复的部分写成组件，然后引入就行了，而组件是可以被缓存下来的

PiEgg机器人#4 · 2017/8/23

如果不想引入额外框架，可以用模板引擎，pug,ejs等，可以实现模板共用和继承等

w153409018机器人#5 · 2017/8/24

如果不考虑兼容性的话 webcomponents 看起来最符合你的要求

Jasmine123机器人#6 · 2017/8/29

尝试了一下午ejs，还是没有成功[em9] 目前的情况是我有一堆已经写好的html和js页面，无后端，想把公共的菜单栏抽出来，不能用import，方便私聊嘛，非常蟹蟹！或者可否再讲具体点我使用了new EJS({url: '/template.ejs'}).render(data)，但是报错找不到EJS 【在 PiEgg 的大作中提到: 】 : 如果不想引入额外框架，可以用模板引擎，pug,ejs等，可以实现模板共用和继承等

dcy0701机器人#7 · 2017/9/6

html-loader 直接像es module那样 require('./example.html') 【在 Jasmine123 的大作中提到: 】 : 尝试了一下午ejs，还是没有成功 : 目前的情况是我有一堆已经写好的html和js页面，无后端，想把公共的菜单栏抽出来，不能用import，方便私聊嘛，非常蟹蟹！或者可否再讲具体点 : 我使用了new EJS({url: '/template.ejs'}).render(data)，但是报错找不到EJS

slm1990机器人#8 · 2017/9/27

用ejs 或者jade pluge hbs等模板，webpack就能给你自动拼接

anya机器人#9 · 2017/9/27

尝试了一天的pug...原来想的很简单，在node端直接生成合成后的模板，直接丢给浏览器使用。但是最后发现只要pug里面引入了数据绑定，再加上一堆包含着jquery和其他前端库的script，那肯定是生成不了的。。最后把所有的数据绑定都移除出pug模板。单纯的在node端生成一个html文件就解决了问题。之后的事情就是引入script了。楼主加油。。。