vue里面组件里面怎么引入js文件

在Vue组件中引入JS文件的方式有多种，可以通过import命令、script标签、挂载到全局对象等方式来实现。接下来，我们将详细介绍其中一种常见的方式。

通过import命令引入

在Vue组件中使用import命令是最常见的方式。通过这种方式，你可以直接将外部的JS文件模块化地引入到你的Vue组件中，并且可以很方便地使用ES6+的模块特性。

import myJsFile from '@/path/to/your/js/file.js';

export default {
  name: 'MyComponent',
  data() {
    return {
      // your data properties
    };
  },
  methods: {
    someMethod() {
      myJsFile.someFunction();
    }
  }
};

一、IMPORT命令

通过import命令引入JS文件是现代前端开发中最推荐的方式。它不仅简化了模块化开发，而且可以方便地使用ES6+的特性，如解构赋值、异步导入等。

1、引入外部模块

首先，你需要确保你的JS文件是一个模块，即它使用了export导出某些内容。

// file.js

export function someFunction() {
  console.log('This is a function from an external JS file.');
}

然后在你的Vue组件中，通过import命令引入这个模块。

// MyComponent.vue

import { someFunction } from '@/path/to/your/js/file.js';
export default {
  name: 'MyComponent',
  mounted() {
    someFunction();
  }
};

2、引入第三方库

如果你想引入第三方库，比如Lodash，你可以通过npm安装这个库并在组件中引入。

// 安装lodash

npm install lodash
// MyComponent.vue
import _ from 'lodash';
export default {
  name: 'MyComponent',
  methods: {
    someMethod() {
      let array = [1, 2, 3, 4, 5];
      let shuffledArray = _.shuffle(array);
      console.log(shuffledArray);
    }
  }
};

二、使用SCRIPT标签

有时候你可能需要在单文件组件（.vue文件）中引入外部的JS文件，尤其是在开发过程中快速调试外部脚本时。你可以在.vue文件的template部分或script部分使用