直接在HTML文件中引用引入全局使用的外部库简单方便但有时候会弄乱整个房间
作者：编程小白 |
发布时间：2025-06-20 |
一、直接在HTML文件中引用
在HTML文件里直接引入JS文件，就像把一本书整个搬到了你的房间。简单，方便，但有时候会弄乱整个房间。
简单快捷：
- 就像直接把书放到书架上，不需要搬来搬去。
- 不用修改组件代码，就像书放在书架上，不用搬动它。
适合场景：
- 类似于需要每个人都能用的参考书。
- 引入全局使用的外部库。
缺点：
- 可能会把房间搞乱（污染全局命名空间）。
- 就像把整本书搬进房间，书太多可能会影响房间整洁（不能按需加载，影响性能）。
二、在Vue组件中引用
如果你只需要在特定的组件中使用外部JS文件，就像是只需要在写作业时查某本书。
优点：
- 只在需要的组件中查书，不影响到其他作业（避免污染全局命名空间）。
- 想查书时才查，不想查就不查（可以更好地控制加载时机）。
缺点：
- 需要在每个想查书的组件里都放一本书，可能会重复放书（需要在每个使用的组件中单独引入，可能导致代码重复）。
三、通过Webpack或Vite等构建工具引用
通过构建工具来引入JS文件，就像有专门的搬书公司，可以根据需要来搬书。
Webpack：
| 步骤 | 说明 |
| --- | --- |
| 安装外部JS库 | 如果是npm包，先安装它。 |
| 在Vue组件中引用 | 把搬来的书放到特定的位置。 |
Vite：
| 步骤 | 说明 |
| --- | --- |
| 安装外部JS库 | 如果是npm包，先安装它。 |
| 在Vue组件中引用 | 把搬来的书放到特定的位置。 |
优点：
- 有搬书公司帮你管理（通过构建工具管理依赖，方便版本控制和更新）。
- 搬书公司有专业技巧（可以利用Tree Shaking等优化手段，提高性能）。
缺点：
- 搬书公司需要收费（需要配置构建工具，增加了复杂度）。
三种方法各有千秋，就像选择哪种搬家方式。根据需求，选最适合的：
- 全局用，就选择第一种。
- 特定用，就选择第二种。
- 需要搬很多，且想节省时间，就选择第三种。
合理选择，让你的Vue应用更加高效！