vue2.0 使用外部js

Vue 2.0 使用外部 JavaScript 文件通常是为了引入一些库或者插件，以便在 Vue 应用中使用这些库提供的功能。以下是使用外部 JavaScript 文件的基础概念、优势、类型、应用场景以及可能遇到的问题和解决方法。

基础概念

在 Vue 2.0 中，可以通过 <script> 标签直接在 HTML 文件中引入外部的 JavaScript 文件，或者在项目的构建配置中通过模块打包工具（如 Webpack）来引入。

优势

1. 代码复用：可以在多个项目中复用同一个外部库。
2. 维护性：库的更新和维护由库的作者负责，减少了项目维护的工作量。
3. 专注核心逻辑：可以将注意力集中在应用的核心逻辑上，而不是重新造轮子。

类型

• 全局脚本：通过 <script> 标签直接引入，通常放在 index.html 文件中。
• 模块脚本：通过 ES6 的 import 语句或者 CommonJS 的 require 函数引入。

应用场景

• 第三方库：如 jQuery、Lodash 等。
• UI 框架：如 Bootstrap、Vuetify 等。
• 数据分析工具：如 Google Analytics、Mixpanel 等。

示例代码

全局脚本引入

在 public/index.html 中添加：

<script src="https://example.com/some-library.js"></script>

然后在 Vue 组件中使用：

export default {
  mounted() {
    // 假设 someLibrary 是外部库暴露的全局变量
    someLibrary.doSomething();
  }
}

模块脚本引入

在 Vue 组件中使用 import：

import someLibrary from 'some-library';

export default {
  mounted() {
    someLibrary.doSomething();
  }
}

可能遇到的问题和解决方法

问题1：全局变量未定义

如果你通过 <script> 标签引入了外部库，但是在 Vue 组件中使用时发现全局变量未定义，可能是因为脚本加载顺序的问题。

解决方法： 确保外部脚本在 Vue 应用的入口点之前加载，或者使用 window 对象来访问全局变量：

mounted() {
  if (window.someLibrary) {
    window.someLibrary.doSomething();
  } else {
    console.error('someLibrary is not defined');
  }
}

问题2：模块未找到

如果你使用 import 或 require 引入模块时出现错误，可能是因为模块路径不正确或者模块没有正确安装。

解决方法： 检查模块路径是否正确，并确保模块已经通过 npm 或 yarn 安装到项目中：

npm install some-library --save
# 或者
yarn add some-library

然后在组件中正确引入：

import someLibrary from 'some-library';

问题3：版本冲突

有时候，不同的库可能会依赖同一个库的不同版本，导致版本冲突。

解决方法： 使用模块打包工具的依赖解析功能来解决版本冲突，或者通过 npm dedupe 命令来简化依赖树。

结论

在 Vue 2.0 中使用外部 JavaScript 文件是一种常见的做法，可以通过全局脚本或模块脚本的方式引入。需要注意脚本加载顺序、模块路径和版本冲突等问题，并采取相应的解决方法。