静态html页面有什么组件化开发方案？

最新推荐文章于 2024-06-15 02:41:51 发布

胖若西瓜

最新推荐文章于 2024-06-15 02:41:51 发布

阅读量1k

点赞数

分类专栏：前端文章标签： vue.js html javascript

本文链接：https://blog.csdn.net/striverst/article/details/120748829

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

疑问：

如果有一个纯静态的网站项目，网站有公共的头部菜单，公共的底部，怎么实现公共部分的复用呢？
使用vue开发spa页面就可以很方便的用template组件实现，但spa对seo并不友好，在一番搜索后发现如下解决方案：

方案：

方法1：
当前方法：通过load()函数，引入公共头部和尾部文件;
代码预览：
$(".headerpage").load(“header.html”);
$(".footerpage").load(“footer.html”);

方法2：
iframe

方法3：
将html转换为js引入。

方法4：
本地合并，也就是将头尾内容三部分通过工具合并成一个html。

实现过程：

本篇文章使用的是方法4实现，方法4的优点是可扩展性好、容错率高，因为可以在导出后继续修改和扩展。
本地合并的框架有 nuxt.js nuxt.js基于vue实现服务端渲染（ssr），生成html页面是它的一个功能，

来自：https://www.nuxtjs.cn/
生成静态站点
生成静态站点是现在的一个热门话题（也叫做 JAMStack）。与其换一个框架并花时间去适应它，为什么不一石二鸟呢？ (only proverbial 🐦🐦)
Nuxt.js 支持基于 Vue 应用程序生成静态站点。这是“两全其美”的，因为你不要服务器，但是仍能获得 SEO 的好处，这是因为 Nuxt 将预先渲染所有页面，并且包括必要的 HTML。此外，你可以轻松地将生成的页面部署到 Netlify 或 GitHub pages 上。

使用nuxt.js生成静态页面着重解决如下问题：
nuxt怎么引用全局css、js？
答：在nuxt项目根目录下创建一个app.html，app.html是公共模板。app.html中引入即可。

静态资源（js、css、png等）文件放在哪里是assets还是static？
答：需要编译的放在assets，不需要编译的放在static，默认情况下 Nuxt 使用 vue-loader、file-loader 以及 url-loader 这几个 Webpack 加载器来处理文件的加载和引用。对于不需要通过 Webpack 处理的静态资源文件，可以放置在 static 目录中。

npm run generate编译会默认为每一个vue页面添加一个同名文件夹，我们并不需要此功能，如何关闭？
nuxt.config.js 中设置如下即可。
generate:{
subFolders:false
},

怎么设置SDK 和title？
首先需要定制一个 html模板，在项目根目录下创建app.html,编译后的每个页面都会在此模板下显示。模板结构如下：

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

{{ HEAD }}是配置文件中设置的头信息
{{ APP }} 是页面

SDK需要在每个页面设置。

部分代码

<!DOCTYPE html>
<html>
  <head>
    {{ HEAD }}
  </head>
  <body>
    <div>页面头部</div>
    {{ APP }}
    <div>页面底部</div>
  </body>
</html>

<style >
</style>
<script src="js.js"></script>
<link rel="stylesheet" href="style.css">

在这里插入图片描述

https://www.nuxtjs.cn/

胖若西瓜

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
静态html页面有什么组件化开发方案？

疑问：如果有一个纯静态的网站项目，网站有公共的头部菜单，公共的底部，怎么实现公共部分的复用呢？使用vue开发spa页面就可以很方便的用template组件实现，但spa对seo并不友好，在一番搜索后发现如下解决方案：方案：方法1：当前方法：通过load()函数，引入公共头部和尾部文件;代码预览：$(".headerpage").load(“header.html”);$(".footerpage").load(“footer.html”);方法2：iframe方法3：将html转换为
复制链接

扫一扫