vue怎么使用外部js

Vue 使用外部 JS 的方法有以下几种：通过 <script> 标签引入、在 main.js 中引入、通过插件形式引入。下面将详细描述通过 <script> 标签引入的方法。

使用 <script> 标签引入外部 JS 是最简单的一种方式。只需在 public/index.html 文件中添加相应的 <script> 标签即可，这样在 Vue 组件中可以直接使用引入的外部 JS。

一、通过 `<script>` 标签引入外部 JS

1.1 在 `public/index.html` 中添加 `<script>` 标签

在 Vue CLI 创建的项目中，public/index.html 文件是项目的入口文件。可以在该文件的 <head> 或者 <body> 标签中添加外部 JS 文件的 <script> 标签。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue App</title>
  <script src="https://example.com/external.js"></script>
</head>
<body>
  <noscript>
    <strong>We're sorry but vue-app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>
</html>

在上述代码中，通过 <script> 标签引入了一个外部 JS 文件 https://example.com/external.js。这样一来，该 JS 文件在整个 Vue 应用中都可以被访问和使用。

1.2 在 Vue 组件中使用外部 JS

通过 <script> 标签引入外部 JS 文件之后，可以在 Vue 组件中直接使用这些外部 JS 提供的功能。例如：

<template>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  mounted() {
    // 假设外部 JS 提供了一个名为 `externalFunction` 的函数
    this.message = externalFunction();
  }
};
</script>
<style scoped>
h1 {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  font-weight: normal;
  line-height: 1.6;
  margin: 0;
}
</style>

在上述代码中，假设外部 JS 文件 external.js 中提供了一个名为 externalFunction 的函数，可以在 mounted 钩子函数中直接调用这个外部函数，并将返回的值赋给 message 变量。

二、在 `main.js` 中引入外部 JS

2.1 在 `main.js` 文件中引入

另一种方式是直接在 Vue 项目的入口文件 main.js 中引入外部 JS 文件。这种方式适用于需要在整个项目中使用的外部 JS 文件。

// main.js
import Vue from 'vue'
import App from './App.vue'
// 引入外部 JS 文件
import 'https://example.com/external.js'
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
}).$mount('#app')

2.2 在 Vue 组件中使用外部 JS

同样，在 main.js 中引入外部 JS 文件之后，可以在任何 Vue 组件中直接使用这些外部 JS 提供的功能。例如：

<template>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  mounted() {
    // 假设外部 JS 提供了一个名为 `externalFunction` 的函数
    this.message = externalFunction();
  }
};
</script>
<style scoped>
h1 {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  font-weight: normal;
  line-height: 1.6;
  margin: 0;
}
</style>

三、通过插件形式引入外部 JS

3.1 创建 Vue 插件

通过插件形式引入外部 JS 文件可以使得代码更加模块化和可维护。首先，需要创建一个 Vue 插件文件，例如 plugins/external-plugin.js。

// plugins/external-plugin.js
// 引入外部 JS 文件
import 'https://example.com/external.js'
export default {
  install(Vue) {
    // 在 Vue 原型链上添加外部 JS 提供的功能
    Vue.prototype.$externalFunction = externalFunction;
  }
};

3.2 在 `main.js` 中注册插件

接下来，需要在 main.js 文件中注册这个插件。

// main.js
import Vue from 'vue'
import App from './App.vue'
// 注册插件
import ExternalPlugin from './plugins/external-plugin'
Vue.use(ExternalPlugin)
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
}).$mount('#app')

3.3 在 Vue 组件中使用插件提供的功能

注册插件之后，可以在 Vue 组件中通过 this.$externalFunction 来访问外部 JS 提供的功能。

<template>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  mounted() {
    // 使用插件提供的功能
    this.message = this.$externalFunction();
  }
};
</script>
<style scoped>
h1 {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  font-weight: normal;
  line-height: 1.6;
  margin: 0;
}
</style>

四、通过 npm 包或模块化引入外部 JS

4.1 使用 npm 安装外部 JS 包

对于一些流行的外部 JS 库，可以通过 npm 安装并在 Vue 项目中使用。例如，安装 lodash 库：

npm install lodash

4.2 在 Vue 组件中引入并使用

在安装完 lodash 之后，可以在 Vue 组件中通过 import 语句引入并使用该库。

<template>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>
</template>
<script>
import _ from 'lodash';
export default {
  data() {
    return {
      message: ''
    };
  },
  mounted() {
    // 使用 lodash 提供的功能
    this.message = _.join(['Hello', 'world'], ' ');
  }
};
</script>
<style scoped>
h1 {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  font-weight: normal;
  line-height: 1.6;
  margin: 0;
}
</style>

在上述代码中，通过 import 语句引入了 lodash 库，并在 mounted 钩子函数中使用 _.join 方法。

五、总结

在 Vue 项目中使用外部 JS 文件的方法有多种，可以根据具体需求选择合适的方式：

通过 <script> 标签引入：简单直接，但可能会增加全局变量的污染。
在 main.js 中引入：适用于全局使用的外部 JS 文件。
通过插件形式引入：模块化和可维护性更高，适用于需要在多个组件中使用的外部 JS 功能。
通过 npm 包或模块化引入：适用于流行的外部 JS 库，使用方便，且有利于代码的模块化和可维护性。

在实际项目中，推荐使用插件形式和 npm 包的方式，这样可以更好地管理外部 JS 文件，提高代码的可读性和维护性。