vue如何导入js

在Vue中导入JavaScript文件有几种方法，1、可以直接在组件中导入，2、通过Vue CLI配置，3、在模板中通过script标签引入。以下是具体的步骤和方法。

一、直接在组件中导入

这种方法适用于需要在特定组件中使用JavaScript文件的情况。

创建一个JavaScript文件，例如utils.js:

// utils.js
export function greet() {
  console.log("Hello from utils.js!");
}

在Vue组件中导入并使用：

// MyComponent.vue
<script>
import { greet } from './utils.js';
export default {
  mounted() {
    greet();
  }
}
</script>

二、通过Vue CLI配置导入

这种方法适用于全局导入JavaScript文件，便于在多个组件中使用。

在项目根目录创建一个文件夹，例如src/assets/js/，并在其中创建JavaScript文件global.js:

// src/assets/js/global.js
export function globalFunction() {
  console.log("Hello from global.js!");
}

修改vue.config.js文件进行配置（如果没有此文件，可以创建一个）：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.resolve.alias
      .set('@js', path.resolve(__dirname, 'src/assets/js'));
  }
}

在Vue组件中导入并使用：

// MyComponent.vue
<script>
import { globalFunction } from '@js/global.js';
export default {
  mounted() {
    globalFunction();
  }
}
</script>

三、在模板中通过script标签引入

这种方法适用于需要在整个应用中使用外部JavaScript库的情况。

在public/index.html中添加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>
  </head>
  <body>
    <div id="app"></div>
    <script src="/path/to/your/external.js"></script>
  </body>
</html>

在Vue组件中使用：

// MyComponent.vue
<script>
export default {
  mounted() {
    // 假设external.js中定义了一个全局函数 externalFunction
    externalFunction();
  }
}
</script>

四、结合多种方法使用

为了更好的灵活性和维护性，开发者可以根据需要结合多种方法。例如，可以在某些组件中直接导入JavaScript文件，同时在其他情况下通过Vue CLI配置全局导入。

结合方法1和方法2：

// utils.js
export function greet() {
  console.log("Hello from utils.js!");
}
// src/assets/js/global.js
export function globalFunction() {
  console.log("Hello from global.js!");
}
// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.resolve.alias
      .set('@js', path.resolve(__dirname, 'src/assets/js'));
  }
}
// MyComponent.vue
<script>
import { greet } from './utils.js';
import { globalFunction } from '@js/global.js';
export default {
  mounted() {
    greet();
    globalFunction();
  }
}
</script>

总结起来，在Vue项目中导入JavaScript文件的方法有多种，开发者可以根据具体需求选择合适的方法。直接在组件中导入适合局部使用，通过Vue CLI配置适合全局使用，而通过script标签引入适合外部库的使用。结合多种方法可以实现更灵活的开发。希望这些方法能帮助你更好地管理和使用JavaScript文件。

相关问答FAQs：

1. 如何在Vue中导入外部的JavaScript文件？

在Vue中，可以使用<script>标签来导入外部的JavaScript文件。在Vue组件的<script>标签中，可以使用import关键字来导入其他JavaScript文件。例如，如果要导入一个名为example.js的外部JavaScript文件，可以在Vue组件中使用以下代码导入：

import example from './example.js';

这将导入example.js文件，并将其赋值给名为example的变量。然后，您可以在Vue组件中使用example变量来访问example.js中定义的函数、变量等。

2. 如何在Vue中引入第三方库？

在Vue中引入第三方库的方法与导入外部JavaScript文件类似。您可以使用import关键字来导入第三方库的JavaScript文件，并在Vue组件中使用它们。例如，如果要引入名为lodash的第三方库，可以在Vue组件中使用以下代码引入：

import _ from 'lodash';

这将引入lodash库，并将其赋值给名为_的变量。然后，您可以在Vue组件中使用_变量来访问lodash库中提供的函数、方法等。

3. 如何在Vue中使用外部JavaScript文件中的函数？

要在Vue中使用外部JavaScript文件中的函数，首先需要将该文件导入到Vue组件中。然后，您可以在Vue组件的方法中调用外部JavaScript文件中的函数。例如，假设您有一个名为example.js的外部JavaScript文件，其中定义了一个名为exampleFunction的函数。您可以按照以下步骤在Vue组件中使用该函数：

使用import关键字将example.js导入到Vue组件中：

import exampleFunction from './example.js';

在Vue组件的方法中调用exampleFunction函数：

methods: {
  callExampleFunction() {
    exampleFunction();
  }
}

这样，当您在Vue组件中调用callExampleFunction方法时，它将执行exampleFunction函数，并执行该函数中的代码。请确保在导入和调用函数时使用正确的文件路径和函数名称。

文章标题：vue如何导入js，发布者：飞飞，转载请注明出处：https://worktile.com/kb/p/3609050