本教程详细介绍了如何在不使用 npm 的情况下，通过 CDN（unpkg）直接将 Pinia 状态管理库导入到 Vue 3 浏览器应用程序中。文章提供了正确的 unpkg URL 和导入代码示例，并指导读者如何查找其他浏览器可用的包，适用于快速原型开发或轻量级项目。
引言：在浏览器环境中集成 Pinia
在某些开发场景中，例如快速原型验证、简单的独立页面应用或教学示例，开发者可能希望直接在浏览器中使用 Vue 3 和其生态系统库，而无需复杂的构建工具链（如 Vite、Webpack）或 Node.js 环境下的 npm/yarn 包管理。然而，对于像 Pinia 这样的状态管理库，其官方文档通常侧重于 npm 安装方式，使得直接通过 CDN 引入的路径变得不那么显而易见。本文旨在解决这一痛点，提供一个清晰的指南，演示如何在纯浏览器环境中，利用 unpkg CDN 服务将 Pinia 引入 Vue 3 应用。
通过 unpkg 引入 Pinia
unpkg 是一个内容分发网络（CDN），它能够提供 npm 上几乎所有包的浏览器优化版本。这意味着你可以直接通过 URL 在 <script type="module"> 标签中导入这些模块。对于 Pinia，其核心模块也可以通过 unpkg 获取。
正确的 Pinia 导入 URL 如下：
立即学习“前端免费学习笔记（深入）”；
import { createPinia, defineStore } from 'https://unpkg.com/pinia@2.1.7/dist/pinia.esm-browser.js';说明：
- https://unpkg.com/pinia@2.1.7/：指定了 Pinia 包的名称和版本号。建议始终指定版本号（例如 @2.1.7），以确保代码的稳定性，避免未来 Pinia 版本更新可能带来的兼容性问题。
- dist/pinia.esm-browser.js：这是 Pinia 专为浏览器环境优化的 ES 模块版本。它支持 import 语句，并且通常比 index.js 或其他 CommonJS 版本更适合直接在浏览器中使用，因为它能够利用浏览器的模块加载机制。
完整示例代码
以下是一个完整的 HTML 文件示例，展示了如何在一个 Vue 3 应用中，通过 unpkg 导入并使用 Pinia 来管理一个简单的计数器状态，全程无需 npm。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 3 + Pinia (无 npm) 示例</title>
<style>
body { font-family: sans-serif; margin: 20px; }
#app { border: 1px solid #eee; padding: 20px; border-radius: 8px; max-width: 400px; margin: 0 auto; text-align: center; }
button { padding: 8px 15px; margin: 5px; cursor: pointer; border: 1px solid #ccc; border-radius: 4px; background-color: #f0f0f0; }
button:hover { background-color: #e0e0e0; }
h1 { color: #42b883; }
p { font-size: 1.1em; }
</style>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<p>当前计数: {{ counter.count }}</p>
<button @click="counter.increment()">增加</button>
<button @click="counter.decrement()">减少</button>
<p>双倍计数: {{ counter.doubleCount }}</p>
</div>
<script type="module">
// 导入 Vue 3 核心模块
import { createApp, ref, computed } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
// 导入 Pinia 核心模块
import { createPinia, defineStore } from 'https://unpkg.com/pinia@2.1.7/dist/pinia.esm-browser.js'; // 建议指定版本
// 1. 定义一个 Pinia Store
const useCounterStore = defineStore('counter', {
state: () => ({
count: 0
}),
getters: {
doubleCount: (state) => state.count * 2
},
actions: {
increment() {
this.count++;
},
decrement() {
this.count--;
}
}
});
// 2. 创建 Vue 应用
const app = createApp({
setup() {
const message = ref('Vue 3 + Pinia (无 npm) 示例');
// 3. 在 setup 中使用 Pinia Store
// 一旦 Pinia 被安装到 Vue 应用中，可以直接调用 useStore() 函数获取 store 实例
const counter = useCounterStore();
return {
message,
counter
};
}
});
// 4. 安装 Pinia 到 Vue 应用
// 必须在挂载 Vue 应用之前调用 app.use(createPinia())
app.use(createPinia());
// 5. 挂载 Vue 应用
app.mount('#app');
</script>
</body>
</html>将上述代码保存为 .html 文件，并直接在浏览器中打开，即可看到一个功能完整的 Vue 3 + Pinia 应用，无需任何本地服务器或构建步骤。
如何查找其他 CDN 包
unpkg 不仅适用于 Pinia，也适用于大多数流行的前端库。如果你想知道某个 npm 包在 unpkg 上的可用文件路径，可以使用以下 URL 格式进行浏览：
https://unpkg.com/browse/<package_name>/
例如，要浏览 Pinia 包的文件结构，你可以访问： https://www.php.cn/link/c0c0d016711b9da72bd0de3897b4c9d3
重要提示： 请确保在包名后加上 / 斜杠，否则可能无法正确显示文件列表。通过这种方式，你可以找到特定版本的 dist 目录下的 ES 模块文件（通常以 .esm-browser.js 或 .mjs 结尾），它们是直接在浏览器中 import 的理想选择。
注意事项与最佳实践
尽管通过 unpkg 直接引入库非常便捷，但在实际应用中仍需考虑以下几点：
-
适用场景： 这种方法最适合于：
- 快速原型开发和概念验证。
- 学习和测试 Vue/Pinia 的基本功能。
- 构建非常简单的、不涉及复杂构建流程的独立页面应用。
- 在特定环境下（如某些 CMS 或在线编辑器）插入前端逻辑。
-
局限性：
- 无构建优化： 缺少了 Webpack、Vite 等构建工具提供的代码打包、压缩、Tree Shaking（尽管 ESM 模块本身有一定优化）、热模块替换 (HMR) 等功能。这可能导致加载速度较慢、文件体积较大。
- 依赖管理： 所有的依赖都需要手动通过 <script type="module"> 导入，管理起来不如 npm 方便，尤其是在项目依赖较多时。
- 生产环境： 对于大型、复杂的生产级应用，强烈建议使用基于 npm 的构建工具链，以获得最佳的性能、可维护性和开发体验。
- 版本控制： 始终建议在 unpkg URL 中指定库的版本号（例如 pinia@2.1.7）。这可以防止 CDN 上库的更新导致你的应用出现意外的兼容性问题或行为变化。
- 错误处理： 浏览器中的模块导入错误通常会在控制台中显示，但相比于构建工具提供的详细错误报告，可能不那么直观。
总结
通过 unpkg CDN，开发者可以在不依赖 npm 和构建工具的情况下，轻松地将 Pinia 状态管理库引入到 Vue 3 浏览器应用程序中。这种方法为快速开发、原型验证和学习提供了极大的便利。然而，在决定采用此方法时，应充分权衡其便捷性与大型项目所需的性能优化和复杂依赖管理能力。理解 unpkg 的使用方式，也能帮助你更好地探索和利用前端生态系统中丰富的开源资源。
