从零到一：用 Vue 打造一个零依赖、插件化的 JS 库
💡
原文中文，约7000字，阅读约需17分钟。
📝
内容提要
本文介绍如何使用 Vue 和 Vite 从零构建一个独立的 JS 库 phpreturn。该库通过 <script> 标签引入，支持全局 API 和 UI 驱动，且与现有项目无冲突。核心挑战在于打包和隔离，采用 Shadow DOM 技术解决 JS 和 CSS 冲突，最终实现了一个即插即用的库，扩展了 Vue 的应用场景。
🎯
关键要点
- 使用 Vue 和 Vite 从零构建独立的 JS 库 phpreturn。
- 库通过 <script> 标签引入，支持全局 API 和 UI 驱动，且与现有项目无冲突。
- 核心挑战在于打包和隔离，采用 Shadow DOM 技术解决 JS 和 CSS 冲突。
- 目标是创建一个单一的 JS 文件，使用简单，支持全局 API 和 UI 驱动，环境无关。
- 打包时需要将 Vue 和业务组件一起打包，不能将 Vue 设置为外部依赖。
- 使用 Shadow DOM 技术实现 JS 和 CSS 的隔离，避免冲突。
- 初始化 Vite 项目并清理默认文件，准备编写库入口逻辑。
- 配置 Vite 进行独立打包，输出 UMD 格式的库文件。
- 创建 Shadow DOM 环境，定义全局 API，并挂载 Vue 组件。
- 将样式分离到单独的 CSS 文件中，以适应 Shadow DOM 的需求。
- 运行 npm run build 打包生成独立的 phpreturn.js 文件。
- 在 HTML 页面中引入库并调用全局 API，使用简单方便。
- 创建测试页面以实现开发时的实时预览，提升开发效率。
➡️
