Web - 分类 - 研发日志 · R&D Loghttps://rd163.visword.com/categories/web/Web - 分类 - 研发日志 · R&D LogHugo -- gohugo.iozh-CNwhutluohui@gmail.com (小智晖)whutluohui@gmail.com (小智晖)本作品采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。Tue, 21 Jul 2026 00:00:00 +0800Vite 入门https://rd163.visword.com/posts/get-started-with-vite/Tue, 21 Jul 2026 00:00:00 +0800小智晖https://rd163.visword.com/posts/get-started-with-vite/

Next generation frontend tooling. It’s fast!

  • Vite 在启动时将应用中的模块区分为依赖(dependencies)与源码(source code)两类，从而改进了开发服务器的启动时间。依赖多为第三方库，变动不频繁，Vite 使用 esbuild 对其进行预打包;源码则按需通过原生 ESM 提供给浏览器。
  • 在 Vite 中，HMR(热模块替换)是在原生 ESM 之上执行的。编辑某个文件时，Vite 只需要精确地使已编辑模块与其最近的 HMR 边界之间的链失活（大多数时候只是模块本身）,因此无论应用规模如何，HMR 始终能保持快速更新。

安装:

]]>Ollama 的 WebUI 选型https://rd163.visword.com/posts/ollama-webui/Sun, 12 Jan 2025 00:00:00 +0800小智晖https://rd163.visword.com/posts/ollama-webui/Ollama 是目前最流行的本地大语言模型（Large Language Model，LLM）运行器之一，基于 llama.cpp 构建，采用 Go 语言封装，MIT 协议开源。它把权重下载、量化版本选择、上下文管理、推理参数等繁琐细节都收拢在一条命令背后，让 macOS、Windows、Linux 用户可以像 docker run 一样在本地跑起 Llama、Qwen、Gemma、DeepSeek、GLM 等开源模型。但 Ollama 本身只暴露一个命令行界面与一个 HTTP API，若希望像使用 ChatGPT 那样在浏览器里对话、管理多轮会话、上传文档，就需要再搭配一个 WebUI。本文先回顾 Ollama 的接口形态，再盘点几类常见的 WebUI 方案与选型要点。

]]>Vue.js 框架入门https://rd163.visword.com/posts/vuejs/Sun, 12 Jan 2025 00:00:00 +0800小智晖https://rd163.visword.com/posts/vuejs/<p>Vue(发音 /vjuː/,同 view)是一个用于构建用户界面（user interface）的 JavaScript 框架，基于标准 HTML、CSS 与 JavaScript 构建。它由尤雨溪（Evan You）于 2014 年发布，目前主版本为 Vue 3，截至撰稿时最新稳定版为 3.5 系列。Vue 在官方文档中将自己定位为「渐进式框架」(progressive framework)——可以根据项目复杂度逐步引入，从给静态页面加点交互，到构建复杂的单页应用（Single-Page Application, SPA）、服务端渲染（SSR）、静态站点生成（SSG）,甚至配合 Electron / Capacitor 打包为桌面端或移动端应用。</p>Web 前端框架https://rd163.visword.com/posts/web-framework/Sun, 12 Jan 2025 00:00:00 +0800小智晖https://rd163.visword.com/posts/web-framework/<p>Web 前端框架（Web Frontend Framework）为浏览器端应用提供组件化模型、路由、状态管理、构建工具链等一整套约定与基础设施。本文按「底层库 → 上层框架 → 构建工具 → 国内方案」的脉络，梳理目前主流的几类技术栈，便于快速建立整体认识。</p>Webpack 入门教程https://rd163.visword.com/posts/webpack/Sun, 12 Jan 2025 00:00:00 +0800小智晖https://rd163.visword.com/posts/webpack/<p>Webpack 是一款用于现代 JavaScript 应用的<strong>静态模块打包器</strong>(static module bundler)。它从一个或多个入口出发，递归地构建出整个应用的依赖关系图（dependency graph）,然后把每个模块组合成一个或多个 bundle(产物包)。尽管近两年 Vite、Turbopack、Rspack 等基于原生 ESM 或 Rust 的新工具快速崛起，Webpack 依然是大量线上项目和企业脚手架的主流选择，理解它的概念模型对前端工程化仍然必不可少。</p>导航网站https://rd163.visword.com/posts/nav-sites/Sun, 12 Jan 2025 00:00:00 +0800小智晖https://rd163.visword.com/posts/nav-sites/整理一份按技术栈归类的开源导航站项目清单，方便挑选合适的方案自建导航页或浏览器主页。

React / Next.js

  • next-web-nav 一个简单好用的导航网站:基于 Next.js 14 + Tailwind CSS + shadcn/ui，本地数据持久化，支持可视化数据管理面板。
  • tap4-ai-webui:面向 AI 工具站的导航模板，内置支付能力。

    注：截至核实日，该仓库返回 404，可能已迁移或下架，请以最新链接为准。

    ]]>集成前端 UI 与 API Server 的最佳实践https://rd163.visword.com/posts/integrate-frontend-and-api/Sun, 12 Jan 2025 00:00:00 +0800小智晖https://rd163.visword.com/posts/integrate-frontend-and-api/<p>前端 UI 与 API Server 如何「拼到一起」是每个全栈项目迟早要回答的问题。即便前后端在开发期完全独立，真正上线时也要决定：浏览器从哪里取静态资源、跨域请求如何收敛、单域还是子域、静态文件由谁托管。本文按「集成形态」为主线，梳理几种主流方案及其背后的取舍，并附上开源项目作为参考实现。</p>前端低代码平台https://rd163.visword.com/posts/ui-low-code/Sun, 12 Jan 2025 00:00:00 +0800小智晖https://rd163.visword.com/posts/ui-low-code/低代码（Low-Code）并不是要把前端工程师替代掉，而是把"重复且价值低的部分"用配置化的方式沉淀下来——表单、CRUD 页面、后台管理界面、数据看板，这些场景长期占用大量人力却创新度有限。本文按"纯前端低代码 / 微前端 / 前后端一体"三类，梳理几个值得纳入技术选型的开源项目。

    ]]>    使用 Rust 创建 Web 应用程序https://rd163.visword.com/posts/web-app-with-rust/Sun, 12 Jan 2025 00:00:00 +0800小智晖https://rd163.visword.com/posts/web-app-with-rust/Rust 凭借零成本抽象、强类型系统和出色的 WebAssembly(Wasm)编译目标，正逐步成为前端开发的一个新选项。借助 wasm-bindgen 与 wasm-pack 等工具链，开发者可以将 Rust 代码编译为 Wasm 模块在浏览器中运行，从而在保留类型安全与高性能的同时绕开传统 JavaScript 生态的部分痛点。

    ]]>    用 AIGC 开发 Web UI 界面的产品https://rd163.visword.com/posts/web-development-by-aigc/Sun, 12 Jan 2025 00:00:00 +0800小智晖https://rd163.visword.com/posts/web-development-by-aigc/<p>AIGC（AI-Generated Content，人工智能生成内容）正在重塑 Web 前端开发的工作流。过去需要设计师交付稿、工程师手写组件、再反复联调的链路，现在被压缩成「描述 / 截图 / 拾取 → 生成可运行代码」的一步。本文按「文本生成 UI」「截图/UI 拾取生成代码」「AI 代码编辑器」三类，梳理目前主流的 AIGC Web UI 产品，并给出选型参考。</p>