前端工具链
文章平均质量分 50
前端工具链
**之火
希望一直深耕钱端领域,但也喜欢涉猎其他计算机编程领域,钱端幸福三要素:悠闲,寡欲,融入自然。
展开
-
Nuxt 项目集成第三方UI组件库(九)
Nuxt.js 本身并不提供内置的 UI 组件库,它是一个用于构建服务端渲染(SSR)和静态生成(SSG)Vue.js应用的框架。Nuxt.js 的设计目的是提供基础的架构和配置,以便开发者可以根据自己的需求选择和集成第三方 UI 组件库。原创 2024-07-01 09:10:03 · 314 阅读 · 0 评论 -
Nuxt 的异步数据处理(八)
{${${原创 2024-06-28 10:52:33 · 571 阅读 · 0 评论 -
Nuxt 的路由结构系统(七)
Nuxt.js 的路由系统非常灵活,它允许你通过文件系统来定义路由,同时提供了动态路由、嵌套路由、异步数据加载和中间件等功能,以满足各种复杂的路由需求。虽然大多数情况下 Nuxt.js 的路由系统可以自动工作,但有时你可能需要自定义路由配置。在 Nuxt.js 中,每个 .vue 文件在 pages/ 目录下都会自动成为一个路由。文件名决定了路由的路径。在 posts.vue 中,你可以定义一个列表页面,而在 posts/_slug.vue 中,你可以定义一个详情页面。Nuxt.js 也支持嵌套路由。原创 2024-06-27 09:36:25 · 371 阅读 · 0 评论 -
Nuxt 框架静态站点生成(SSG)(六)
当你运行 nuxt generate 命令时,Nuxt 会调用 asyncData 方法来获取数据,并为每篇文章生成一个静态 HTML 文件。生成的静态文件会放在 dist/ 目录下。首先,你需要在项目的 nuxt.config.js 文件中设置 target 为 ‘static’,这告诉 Nuxt 你打算生成一个静态网站。你可以创建一个动态路由来捕获这个 ID,并为每篇文章生成一个静态页面。这个命令会触发静态站点的生成过程,Nuxt 会读取你的动态路由,并为每个可能的路由生成一个静态 HTML 文件。原创 2024-06-27 08:54:00 · 563 阅读 · 0 评论 -
Nuxt 应用的三种运行模式(五)
SPA 模式是最常见的 Web 应用模式,整个应用在加载完成后,用户的操作不会引发页面跳转,而是通过 JavaScript 动态更新页面内容。原创 2024-06-26 17:13:32 · 669 阅读 · 0 评论 -
Nuxt 项目的默认目录结构(三)
例如,可以在 pages/ 目录下创建更多的页面文件或目录来定义应用程序的路由,或者在 components/ 目录下添加更多的 Vue 组件。此外,Nuxt.js 也支持自定义目录结构,可以通过修改 nuxt.config.js 文件来实现。原创 2024-06-26 16:46:48 · 246 阅读 · 0 评论 -
Nuxt 框架常见配置选项(二)
【代码】nuxt框架常见配置选项(二)原创 2024-06-26 09:07:23 · 252 阅读 · 0 评论 -
工具链 之 Vite 部署静态站点(六)
如果你希望将构建的输出放在不同的目录中,你可以在 vite.config.js 或 vite.config.ts 文件中配置 build.outDir 选项。如果你选择自己管理服务器而不是使用托管服务,你需要确保你的服务器能够正确地提供静态文件。这通常涉及到配置你的服务器来从 Vite 构建的输出目录中提供文件。一旦你有了构建好的静态文件,你就可以将它们部署到任何支持静态文件的服务器上。在项目的 package.json 文件中定义好npm 脚本命令。原创 2024-06-20 23:31:45 · 468 阅读 · 0 评论 -
工具链 之 Vite 依赖优化选项(五)
rollupOptions 允许你覆盖 Rollup 的默认配置,Rollup 是 Vite 用于生产构建的打包器。你可以通过此选项来调整依赖打包的行为。assetsDir 选项用于配置静态资源(如图片、字体等)在输出目录中的位置。minify 选项用于配置是否压缩生产构建的输出代码,以及使用的压缩工具。cssCodeSplit 选项用于配置是否将 CSS 代码拆分成多个文件。这些选项与构建输出的大小和警告相关。原创 2024-06-19 09:04:45 · 794 阅读 · 0 评论 -
工具链 之 Vite 主要的构建选项(build)属性(四)
【代码】工具链 之 Vite 主要的构建选项(build)属性(四)原创 2024-06-18 16:07:37 · 192 阅读 · 0 评论 -
工具链 之 Vite 开发服务器所有选项解析(三)
在 Vite 中,server.watch 选项通常不是直接暴露给用户进行配置的,因为它涉及到 Vite 内部对文件系统的监视机制。然而,Vite 确实提供了一些与文件监视相关的配置选项,这些选项通常包含在 resolve、build 或其他配置部分中,而不是直接放在 server 配置下。其中包含了一些与文件系统相关的配置。原创 2024-06-17 10:53:49 · 273 阅读 · 0 评论 -
工具链 之 Vite 常见的共享选项配置(二)
define: {// ... 其他环境相关的全局变量},},// ... 其他配置})原创 2024-06-17 09:05:08 · 455 阅读 · 0 评论 -
工具链--nuxt框架 简介(一)
Nuxt框架是一个基于Vue.js的服务器端渲染(SSR)框架,旨在提供一套完整的前端开发解决方案,帮助开发者构建高性能、可扩展的Web应用。是一个功能强大、易于使用的Web开发框架,适用于多种开发场景和需求。Nuxt框架建立在Vue.js之上,它抽象出了管理异步数据、中间件和路由所涉及的大部分复杂配置。Nuxt不仅继承了Vue.js的所有优点,如易用性、灵活性等,还与Node.js紧密集成,使得开发者可以在项目中轻松地使用Node.js的各种功能。原创 2024-06-16 18:09:06 · 645 阅读 · 0 评论 -
工具链 之 vite 简介(一)
Vite使用Rollup作为默认的构建工具。通过运行npm run build命令,Vite会将应用程序的源代码打包成一个或多个优化的静态文件,以便在生产环境中进行部署。Vite的构建过程会根据需要进行代码拆分、压缩和优化,以提供最佳的性能和文件大小。原创 2024-06-13 09:15:27 · 957 阅读 · 0 评论 -
koa2快速2分钟搭建web服务器
koa不在内核方法中绑定任何中间件,它仅仅是一个轻量级的函数库,几乎所有功能都必须通过第三方插件来实现。项目基本依赖配置package.json,使用此配置可直接npm install下一个应用运行起来。koa2依赖Node.js 7.6.0或者更高版本。,Koa2更加的便利,所以默认选用Koa2。Koa是一个基于Node的web服务。7、封装lowdb插件,用于数据存储。Koa1它的主要特点是,使用了。是koa2实现异步是通过。,koa1实现异步是通过。3、koa请求跨域配置。6、post方法请求接口。原创 2023-09-05 10:36:40 · 439 阅读 · 1 评论 -
webpack学习笔记
但是我们的项目中可能存在大量的非JavaScript文件,如HTML、CSS、Typescript、txt,图片文件等,他们可能就被js文件依赖,这时候就很难打包上他们。热更新模块监测到文件名变化后,会通过websocket将这个新的文件发送到浏览器,浏览器重新执行该文件,完成局部更新。解决这个问题,我们需要一些额外的代码帮助webpack识别js文件中的嵌套依赖。nodejs使用一个清单文件来记录当前所有的资源文件,这个清单文件也正是热更新模块的监测对象。多页面应用打包产生的输出,结果也会有很多个。原创 2023-08-26 17:32:03 · 950 阅读 · 0 评论 -
vite.config.ts配置代码例子
【代码】vite.config.ts配置代码例子。原创 2024-04-05 09:22:44 · 185 阅读 · 0 评论 -
Vite入门学习笔记
这也正是我们对 “打包” 这个概念熟悉的原因:使用工具抓取、处理并将我们的源码模块串联成可以在浏览器中运行的文件。启动开发服务器通常需要很长时间,有时候长达6/7分钟之久,即使使用模块热替换(HMR),文件修改后的效果也需要几秒钟才能在浏览器中刷新出来,极大影响开发体验,需要升级工具。当以命令行方式运行 vite 时,Vite 会自动解析项目根目录下名为 vite.config.js 的配置文件(也支持其他 JS 和 TS 扩展名)。原创 2023-08-26 12:10:45 · 454 阅读 · 0 评论 -
很不错实用的前端工具
▍CSS 相关●1CSSBattle-在线比拼 CSShttps://cssbattle.dev在线比拼 CSS ,一个挺有趣的竞争性游戏,一共有12个级别,需要你用 HTML和 CSS 100%还原它给出的页面,然后再尽量减少代码,你也可以查看全球的排行榜,看解决方案。●2Learn CSS layout - 学习CSS 布局http://learnlayout.com在线CSS布局学习,它会一步一步引导初学者学习 CSS 基础知识,在实践中帮助初学者...原创 2020-05-08 22:24:19 · 1405 阅读 · 2 评论