首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Vue.js最佳静态站点生成器对比

Nuxt.js 会抽象出客户端 - 服务器分发细节,从而简化 Web 开发工作。 Nuxt.js 基于一个可靠模块化架构,并且有 50 多种模块方便用户入门。...但是,VuePress 针对以内容为中心静态网站创建做了更多优化,而 Nuxt.js 则更多专注于 Web 应用程序开发。...优点 通过热重载,轻松进行本地开发设置。 提供开箱即用代码拆分、资产优化和渐进式图像,以提高性能。 PWA 准备就绪。 SEO 友好。 定义良好结构和自动化路由。 丰富插件。...用过一段时间 Saber.js 后,觉得它更像是 Gatsby、Gridsome 和 Nuxt.js 组合。...相信一旦这个框架稳定下来,这些数字就会有所改善。 优点 自动代码拆分。 基于文件系统路由。 代码重载。 内置 Markdown 支持。 支持 i18n。 缺点 没有 CLI。

5K10

深入探讨 Web 开发预渲染和 Hydration

; 传统 SSR 存在显著缺点,但单页面应用程序出现标志着 Web 开发新时代。...由于初始 HTML 是错误,网络爬虫和搜索引擎无法在网站上找到相关内容并跳过它。 看一下下面的 GIF 图。在这里, Chrome 开发者工具中禁用了 JavaScript。...服务器渲染 React 组件,然后生成 HTML 发送到浏览器。这可以提高 SEO 和初始加载时间。渲染过程每个页面请求发生。 什么是静态站点生成(SSG)?...它加载使我们应用程序具有交互性 JavaScript。 React 中,“Hydration”是 React 如何“附着”到已经服务器环境中由 React 渲染现有 HTML 。...使用Gatsby(一个具有 SSR 功能静态站点生成框架)创建应用 即使没有 JavaScript,我们仍然可以应用上看到内容。那是因为用户收到了预渲染 HTML!

13310
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Gatsby 创建一个博客

    它通过构建通过服务器端渲染动态 react 组件呈现为静态 HTML 内容。...gatsbynewpersonal-blog&&cd $_ 该命令创建文件夹 personal-blog,然后进入该目录。现在一个可供开发环境已经搭建好了。...我们现在可以开始在这个网站上进行真正开发,并且创建一个功能齐全,现代博客。您通常希望使用 gatsby develop 来启动本地开发服务器,以验证我们步骤中所完成功能。...安装了这些功能插件之后,我们编辑 gatsby-config.js。Gatsby 构建加载指定插件公开功能。...创建博客列表 在这一节中没有详细介绍,因为我们已经对我们博客模板做了一些非常相似的事情!看看我们,我们在这一点已经是一个专业级 Gatsby 使用者了!

    2.5K30

    创建 React 应用 7 种方式,你用过几种?

    运行 npm run start 启动脚本, React 应用程序应该在端口 8080 运行,此时我们可以本地开发 react 应用了 配置 proxy 代理 开发,需要请求接口,而接口往往是由后端同学完成...,接口需要通过访问后端 IP 地址来访问,若直接访问会存在跨域问题。...老项目迁移会存在一定成本,可以参考之前文章《 React 应用迁移至 Vite》 四:Gatsby Gatsby 不仅仅是一个静态网站生成器,它更是一个渐进式 Web 应用生成器。...创建 gatsby 应用 npm init gatsby 命令行中选择开发语言,是否使用 CMS、是否支持、md、mdx 等 创建完成后,命令行运行 npm run dev,打开 http://localhost...以 StackBlitz 为例 StackBlitz 是一个在线开发环境,它可以帮助开发者快速创建、运行和分享前端项目, 并且支持协作开发

    7.1K10

    浅谈跨平台框架 Flutter 搭建与运行

    二、更新环境变量:若想在Windows系统自带命令行运行flutter命令,开发者需要添加以下环境变量到用户PATH:“控制面板->用户账户->更改环境变量”,同时,“用户变量”下检查是否有名为“....png] 4.体验重载:Flutter可以通过热重载实现快速开发周期,重载无需重启应用程序就能实时加载修改后代码,并且不会丢失状态。...Android设备启用开发人员选项和USB调试; 使用USB手机插入电脑。...当你选择一个团队,Xcode会创建并下载开发证书,向你设备注册你账户,并创建和下载配置文件。 如果要开始你第一个iOS开发项目,需要使用你Apple ID登录Xcode。...当你第一次使用attach真机设备进行iOS开发,需要同时信任你Mac和该设备开发证书。iOS设备首次连接到Mac,选择信任。

    3.6K40

    博客用不着什么JavaScript框架

    当我第一次听说可以编写 React 并使用这个很酷 GraphQL 新玩意儿,同时还能输出不需要 JavaScript 静态页面很想尝试它一下。...用户首次访问 Gatsby 网站时会发生这些事情: 用户请求一个页面。 服务器静态生成 HTML 文档发送到用户浏览器,然后浏览器开始渲染页面。... Component Gallery 用了它,立刻 JavaScript 负载减少了约 30kb。...Gatsby Starter Low Tech 博客使用 no-javascript 插件和其他一些技术(包括所有图像转换为灰度),来帮助你创建一个轻量且节能博客。...并不是推荐大家都删除自己网站上所有 JavaScript 文件,但从现在开始,构建网站我会尝试 JavaScript 视为可选额外功能,而不是体验基本组成部分。鼓励你也这样做。

    4.1K10

    开发一款基于Vue技术栈全栈重载生产环境脚手架,学到了什么?

    前言 今天,我们来搞一个新东西,名字叫基于Vue技术栈全栈重载生产环境脚手架。实话说,这个名字想了很久。最终,还是以这个名字作为文章标题。...先拆分解释下:全栈意思是支持前后端;重载这个名词相信大家很熟悉,就是页面每次改动,不需要手动去刷新,可自动刷新;生产环境这里你可以理解成线上环境,用户使用环境。...制作页面的时候这个动作可能会重复很多次。我们开发效率就大大地减少了。 所以,我们有必要开发一款可重载生产环境脚手架。如果增加模拟数据接口服务,那就更完美了。...光说不练假把式,我们就开发一款基于Vue技术栈全栈重载生产环境脚手架。 实战 一、初始化项目 首先,我们建一个空文件夹,名字可以叫gulp-vue-cli,这就是项目根文件夹。...npm run dev 浏览器。 打开成功,现在我们改动下代码,看看是否可以重载。 测试成功,这样我们就安心地开发自己代码了,效率自然就提高了。

    60820

    浅谈跨平台框架Flutter搭建与运行

    二、更新环境变量:若想在Windows系统自带命令行运行flutter命令,开发者需要添加以下环境变量到用户PATH:“控制面板->用户账户->更改环境变量”,同时,“用户变量”下检查是否有名为“...如果没有列出可用,请选择 Tools>Android>AVD Manager 创建工具栏中点击 Run图标; 如果一切正常,设备或模拟器上会看到启动应用程序 4.体验重载:Flutter可以通过热重载实现快速开发周期...Android设备启用开发人员选项和USB调试; 使用USB手机插入电脑。...当你选择一个团队,Xcode会创建并下载开发证书,向你设备注册你账户,并创建和下载配置文件。 如果要开始你第一个iOS开发项目,需要使用你Apple ID登录Xcode。...当你第一次使用attach真机设备进行iOS开发,需要同时信任你Mac和该设备开发证书。iOS设备首次连接到Mac,选择信任。

    3.3K20

    Gatsby 博客部署到腾讯云教程

    整体流程 Tips: 正在学习用 Figma 做图,如需上图源文件可以点击这里 准备工作 本地环境 Gatsby 基于 Node.js, Gatsby CLI 依赖 Git,先确保本地开发环境已经...安装 Node.js; 安装 Git; Gatsby 开发环境 Gatsby CLI 工具非常方便,终端全局安装 gatsby-cli npm install -g gatsby-cli 切换到开发目录...云服务器环境 Gatsby 最终会编译成静态站点,这里云服务器环境需要 Web 服务器存放静态网页,另外需要 Git 环境使用 git hook 钩子同步本地推送文件到 Web 服务器,这里以 CentOS...腾讯云搭建 Nginx; 腾讯云搭建 Git; 配置 Nginx 站点 这里为了方便,我们直接用 root 账号为博客设置 Web 目录,服务器创建 /www/blog 目录。.../blog.git" }, 本地开发目录执行,最后输入两次服务器密码后,我们部署流程就大功告成。

    4.3K111

    Swift 中重载

    重载 重载是关于摆脱编译整个应用程序并尽可能避免部署/重新启动周期,同时允许您编辑正在运行应用程序代码并且能立即看到更改。 这种流程改进可以每天为您节省数小时开发时间。...如果您与从事 Flutter 工作工程师交谈,你会发现他们最喜欢 Flutter 开发者体验一点就是能够实时编写他们应用程序。当我为《纽约时报》写了一个拼字游戏很喜欢它。...SwiftUI 出现了,它是一项了不起技术(尽管仍然存在错误),它引入了与 Playgrounds 非常相似的 Swift Previews 想法,它们有什么好处吗?...看看这个开发工作流程有多快吧,告诉你宁愿每次接触代码等待Xcode重新构建和重新部署。 UIKit / AppKit 我们需要一种方法来清理标准命令式UI框架代码注入阶段之间状态。...当我最初开始咨询 TBC 想要第一件事是 Inject 和 XcodeInjection 集成到我们工作流程中。公司管理层非常支持。

    2K20

    2018年1月份最热门JavaScript开源项目

    它会将你 Webpack 构建开发和生产过程中所有相关信息都放到浏览器中。 JARVIS 非常漂亮,可显示导入 ES Harmony 模块数量,以及资产 12 种不同连接类型中表现。...Docusaurus 是 Facebook 专门为开源项目开发者提供一款易于维护静态网站创建工具,使用 Markdown 即可更新网站。...● 启动简单 :Docusaurus构建可以很短时间内启动和运行。Docusaurus已经构建了处理网站过程,开发人员只需专注于项目。...● Node 支持:可在服务器运行,或者运行在 IoT Arduino ● 开放 rAF loop:可以核心 requestAnimationFrame 循环里运行任何进程 十一、JavaScript...目标如下: ● 无需重载页面转换 ● 重载编辑 ● 为构建静态网站创建 React.js 组件模型和生态系统 ● 直观基于目录 URLs ● 支持 "Starters"

    2.1K80

    如何利用机器学习和Gatsby.js创建假新闻网站​

    这是一个开源JavaScript运行时环境,用于浏览器之外执行JavaScript代码。使用Node还可以得到npm,它表示“包管理器”。使用npm,您可以Gatsby.js安装到本地机器。...基本Gatsby.js帮你创建一个有完整骨架网站,你可以调整和重新配置,而不是从头开始构建整个东西。...GitHub现成代码 本地机器拥有站点文件和静态文件之后,就可以使用gatsby develop本地开发服务器进行开发。...理想情况下,运行它不会出现任何故障。如果查看gen.py底部,看到我path /content/gdrive/My Drive/ articles /中编写了文章。...这是为自己设置配置,所以它可能与其他人不同。 下面是运行代码应该看到内容。 ? 当我查看驱动器文章文件夹,我会看到一堆包含假文章markdown 文件。 ?

    4.5K60

    Flutter重载原理

    开发时候,Flutter采用JIT即时编译,对于我们已经写出来Dart代码,是边解释边执行。...现在在Demo工程中修改顶部栏标题为“LAVIE 666”,但是Demo工程中不热重载(其实此时Demog工程跟设备已经断开连接了,你想在Demo工程中重载重载不了了),而是来到挂载了Demo...也就是说,当我们输入r进行重载时候,底层是做了什么事情呢?那就需要研究一下这里listen函数做了什么。...我们前面也已经提到过了,DartVM是部署到本地服务器上面的,部署DartVM服务器我们称之为VMServer。通过终端打印信息我们也已经知道了,VMServer是应用程序一启动时候创建。...其实本地VMServer和DartVM应用程序一启动时候就已经启动了,这里创建VmService类作用就是去关联链接一开始创建DartVM, 这样的话才可以在后面重载时候变动文件传输给

    1.8K40

    【前端自动化】如何使用Node.js实现重载页面

    前言 前不久结合browser-sync+gulp+gulp-nodemon实现了一款生产环境更新(之前理解有点偏差,应该定义为更新,不是重载项目脚手架,那么,今天我们将使用Node.js...那么,今天就总结一下吧,以防止大家也跟我一样。 重载 所谓重载就是页面每次改动,不需要手动去刷新,可自动刷新。...更新 浏览器无刷新更新,允许在运行时替换,添加,删除各种模块,而无需进行完全刷新重新加载整个页面。 目的:加快开发速度,所以只适用于开发环境下使用。...思路:保留在完全重新加载页面丢失应用程序状态,只更新改变内容,以节省开发时间,调整样式更加快速,几乎等同于浏览器调试器中更改样式。 实战 一、初始化项目 这里使用以下命令初始化项目。...二、创建Node主文件app.js 下面,我们创建一个Nodejs操作主文件app.js。

    2.5K10

    gin框架几种热加载方法,你值得拥有

    我们Flask或者Django框架下开发都是支持实时加载当我们对代码进行修改时,程序能够自动重新加载并执行,这在我们开发中是非常便利,可以快速进行代码测试,省去了每次手动重新编译。...Fresh监视文件事件,并且每次创建/修改/删除文件,Fresh都会生成并重新启动应用程序。如果go build返回错误,它会将记录在tmp文件夹中。.../pk # 执行命令,需要增加其他参数 cmd_args: - arg1=val1 # 构建命令,需要增加其他参数 build_args: - -race # 需要增加环境变量...gin 坚持“沉默就是黄金”原则,因此,只有在出现编译器错误或在错误发生后成功进行编译,它才会抱怨。...不同Go版本之间切换。 项目的自定义环境变量。 文件更改前后或全局执行自定义命令。 日志和错误导出到外部文件。 分步项目初始化。 重新设计面板,显示构建错误,控制台输出和警告。

    75420

    【webpack】webpack-dev-server生猛上手——让我们来搭一个webpack服务器吧!

    [前言]:因为最近在搞****API时候用到了webpackexternals,才发现之前都只是用webpack做一些搭建完项目后“收尾工作”——即打包,而没有把它纳入到项目开发“主体过程”中来...于是就有了今天这篇学习文章:利用webpack-dev-server搭建一个webpack服务器 参考资料: webpack-dev-servergithub地址:https://github.com....详解webpack-dev-server配置属性 3.webpack-dev-server自动刷新和模块替换机制 4.webpack下配置服务器三种方式  复习一下webpack知识 目录结构简化之后长这样...(注意下面两张图区别) webpack:当我终端运行"webpack"后: ?...替换(HMR)机制里,不是重载整个页面,HMR程序会只加载被更新那一部分模块,然后将其注入到运行中APP中 (In Hot Module Replacement, the bundle is

    2.3K70

    把你博客拎到云生长吧!

    经过一早上踩坑,终于建好属于自己一亩三分地了,简直比深圳买了房子装修完还开心呢(醒醒,你哪来房子 所以我决定,不如就分享一下是怎么把Hexo博客拎到云上去吧☁️ 网站托管(Serving...同理,当我浏览器地址栏中输入某个网址时候,浏览器会发出寻找该网址对应服务请求,如果找到了,提供该网站服务服务器会把相应网页内容返回给浏览器,浏览器解析后,网页内容就呈现在我们眼前了 所以一个网页要想能被别人访问到...,需要具备满足以下条件: 一个能找到你网页地址IP+端口或者域名) 一个能处理浏览器请求,把资源返回去服务(HTTP Web服务) 所以网站托管做事情就是: 把网页等资源上传到某个地方。...启动一个能对外提供服务HTTP Web服务,把我们网页内容发送给请求方。 ⛳️ 设置这个服务访问地址,可以是IP+端口,也可以起别名(域名)。...图片来自掘金-华为云开发者社区文章 其实结合实际理解,云原生已经具象化地存在于各大云服务厂商官网中:云服务器、云存储、云容器、DevOps流水线等等,他就是一个全新软件开发和部署新生态,帮助开发者们更简单

    80820

    从Java类加载机制谈起:聊聊Java中如何实现部署(热加载)

    三、java中应用 1.生产环境 部署作为一个比较灵活机制,实际生产运用还是有,但相对很少,热加载则基本没有应用。...2.开发使用tomcat热加载 tomcat本身默认开启了部署方式,但部署是直接重新加载整个应用,耗时跟重启服务器差不多,我们需要其实是热加载,即修改了哪个class,只重新加载这一个class...对于tomcat5.x 以上版本,均已支持一定程度上得热加载,但这种方式只针对代码行级别的,也就是说如果新删方法,注解,类,或者变量是无效,只能重启,这是目前公司开发方式,可以显著降低debug...当我们越是深入地研究这一问题,我们就会看到面临挑战并不仅是重载这件事,而且是还要在性能和兼容性方面没有明显退化情况下来做这件事情, 正如我们Reloading Java Classes 101...我们还讨论了导致HotSwap局限性原因,揭示了JRebel幕后工作方式,以及讨论了解决类重载问题出现其他问题。

    3.2K20

    Flask前后端分离实践:Todo App(1)

    }, 100) }) } const api = { getTodos() { return mockRequest('/todos') } } 当然,应用中做了很多美化工作让应用显得高大...关于前端开发服务器和后端开发服务器 可能有的同学已经注意到了,前端和后端都有一个开发服务器,但默认端口号不同,一个是8080,一个是5000。...但它有很多方便调试功能,比如详尽错误信息和重载,编写前端,用这个就够了,但API请求需要弄成假。...而5000端口服务器是Flask提供,启用了FLASK_ENV=development可以打开FlaskDEBUG模式。它也能访问主页,但那是前端已经编译好,不支持重载哦。...否 是 重载 HTML/CSS/Javascript Python 更新静态文件 刷新生效 先yarn run build,再强制刷新 还有,这两个服务器,都不能在生产环境使用哦。

    2.8K20

    为什么Flutter会选择 Dart ?

    下一节介绍Dart编译速度颠覆性例子。 有状态重载 Flutter最受欢迎功能之一是其极速重载开发过程中,Flutter使用JIT编译器,通常可以一秒之内重新加载并继续执行代码。...只要有可能,应用程序状态重新加载保留下来,以便应用程序可以从停止地方继续。 除非自己亲身体验过,否则很难理解开发过程中快速(且可靠)重载重要性。...以下是一位移动应用程序开发人员对Flutter重载评价: 想测试重载,所以我改变了颜色,保存修改,结果……就喜欢它了! 这个功能真的很棒。...当我部署代码并花费很长时间分心了,做了其他事情,当我回到模拟器/设备就忘了想测试内容。有什么比花5分钟控件移动2px更令人沮丧?有了Flutter,这不再存在。...实际,可视化编辑器就变得多余了。一点都不怀恋XCode自动重布局。 Dart创建布局简洁且易于理解,而“超快”重载可立即看到结果。这包括布局非静态部分。

    2.1K30
    领券