从零到一：用 Vue 打造一个零依赖、插件化的 JS 库
内容提要
本文介绍如何使用 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，使用简单方便。
-
创建测试页面以实现开发时的实时预览，提升开发效率。
延伸问答
如何使用 Vue 和 Vite 构建一个独立的 JS 库？
可以通过初始化 Vite 项目，配置打包选项，并使用 Shadow DOM 技术来实现 JS 和 CSS 的隔离，最终生成一个独立的 JS 文件。
phpreturn 库的主要功能是什么？
phpreturn 库允许用户通过引入一个 <script> 标签，使用全局 API 调用功能，并弹出由 Vue 组件构成的 UI 界面。
为什么要使用 Shadow DOM 技术？
使用 Shadow DOM 技术可以有效隔离 JS 和 CSS，避免与宿主页面的冲突，确保库的独立性和稳定性。
如何在 HTML 页面中使用 phpreturn 库？
在 HTML 页面中，通过 <script src="./dist/phpreturn.js"></script> 引入库，然后调用全局 API，例如 phpreturn.chooseUser()。
打包 phpreturn 库时需要注意什么？
打包时需要将 Vue 和业务组件一起打包，不能将 Vue 设置为外部依赖，以确保库的独立性。
如何实现开发时的实时预览？
可以创建一个测试页面并使用 Vite 的开发服务器，修改文件时页面会自动热更新，实时预览效果。
