vue组件内部引入外部js文件的方法

下面是详细的Vue组件内部引入外部js文件方法的攻略：

1. 在Vue组件的script中引入外部js文件

Vue组件的script标签中可以直接引入外部的js文件，例如：

<template>
  <div>
    <!-- 省略组件模板代码 -->
  </div>
</template>

<script src="./test.js"></script>

<script>
export default {
  name: "TestComponent",
  // 组件内部代码省略
}
</script>

上面的代码中，test.js文件在组件script标签中通过<script src="./test.js"></script>的方式直接引入，然后在Vue组件内部就可以使用test.js中的内容了。

2. 使用Vue插件引入外部js文件

如果我们引入的是一个VUE插件，可以使用Vue.use方法来安装插件并引入外部js文件。例如：

<template>
  <div>
    <!-- 省略组件模板代码 -->
  </div>
</template>

<script>
import testPlugin from './test.js'

export default {
  name: "TestComponent",
  mounted() {
    // 组件实例化后可以直接使用testPlugin对象
    console.log(testPlugin)
  },
  // 安装插件，并将外部库传入
  beforeCreate() {
    Vue.use(testPlugin)
  }
}
</script>

上面的代码中，我们将test.js文件作为一个插件使用。首先在组件内部使用import将test.js引入，然后在组件的beforeCreate生命周期方法内使用Vue.use安装插件，并将test.js传入作为参数。这样，在组件mounted生命周期方法中就可以直接使用test.js中的内容了。

另外，如果需要在Vue组件中引用一些第三方库，可以使用npm安装，然后在组件的script标签中直接import引入即可。例如：

<template>
  <div>
    <!-- 省略组件模板代码 -->
  </div>
</template>

<script>
import moment from 'moment'

export default {
  name: "TestComponent",
  mounted() {
    // 使用第三方库moment
    console.log(moment().format('YYYY-MM-DD'))
  },
  // 组件内部代码省略
}
</script>

上面的代码中，我们使用npm安装了moment库，并在组件内部使用import将库引入，然后在mounted生命周期方法中就可以直接使用moment库中的API了。