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

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

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

4.8K10

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 是一个在线开发环境,它可以帮助开发者快速创建、运行和分享前端项目, 并且支持协作开发

6.5K10

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

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

2.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 浏览器。 打开成功,现在我们改动下代码,看看是否可以重载。 测试成功,这样我们就安心地开发自己代码了,效率自然就提高了。

59720

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

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

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

3K20

Swift 中重载

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

1.9K20

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.7K40

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

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

2.4K10

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

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

66020

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

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

3K20

【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

2K70

把你博客拎到云生长吧!

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

79820

为什么Flutter会选择 Dart ?

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

2K30

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.7K20

2021年前端编程发展趋势

这些年前端发生了天翻地覆变化,几乎每隔几个月就有新框架和技术诞生,有些技术可能你还没来得及学习,它就已经成为过去了。2021年前端会有哪些变化,哪些技术会脱颖而出呢?...VUE&VITE正在崛起 vue3诞生和vite2出现,将会给前端带来全新面貌,前端开发将会变得更加顺畅。得益于浏览器对ES支持,vite让更新,冷启动,按需编译成为了可能。...为了克服SEO障碍,Gatsby出现了,它通过回归静态站方式让SEO优化变得非常方便。 丰富插件机制,重载编辑,页面自动转换,这些特性都让gatsby赢得了更多开发人员青睐。...ReactJS依然广受欢迎 虽然vue民间保持了较高占有率,但是各大企业中,react还是处于领先地位。 得益于丰富组件库,使用react会让你开发少走不好弯路。...微前端走进人们视野 我们都知道对于复杂业务,后端往往采用微服务来进行开发部署。那么对于复杂前端页面,有没有相对应技术来解决呢?

39830
领券