vue如何使用js插件

要在 Vue 中使用 JavaScript 插件，有几种不同的方法，具体取决于插件的类型和你的需求。

1. 直接使用全局变量：如果插件是一个全局变量或一个通过 `<script>` 标签引入的库，那么可以直接在 Vue 组件中使用它，就像在普通的 HTML 页面中一样。

例如，如果你想使用 jQuery，可以在 HTML 中引入 jQuery 的库文件，然后在 Vue 组件中使用 `$` 全局变量：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

export default {
  mounted() {
    $('#my-element').fadeIn()
  }
}

2. 使用 Vue 插件：许多 JavaScript 插件都提供了 Vue 版本的插件，可以通过 `Vue.use()` 方法来安装。这种方法的好处是可以让插件与 Vue 的生命周期钩子和选项进行集成。

例如，如果你想使用 vue-router，可以通过 `Vue.use()` 来安装：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  // ...
})

export default {
  router,
  // ...
}

3. 使用 NPM 模块：如果插件是一个 NPM 包，可以使用 `npm install` 命令来安装它，并使用 `import` 或 `require` 语句在 Vue 组件中引入它。

例如，如果你想使用 Lodash，可以通过 `npm install lodash` 来安装，然后在 Vue 组件中使用它：

import _ from 'lodash'

export default {
  methods: {
    foo() {
      const arr = [1, 2, 3]
      const sum = _.sum(arr)
      console.log(sum)
    }
  }
}

总的来说，Vue 中使用 JavaScript 插件的方式很灵活，可以根据实际情况选择适合自己的方法。