9.9 插件

优质

小牛编辑

130浏览

2023-12-01

你可以配置需要在根vue.js应用实例化之前需要运行的 Javascript 插件，可以是你自己写的库或第三方模块。

需要注意的是，在任何 Vue 组件的生命周期内，只有beforeCreate和created这两个钩子方法会在客户端和服务端均被调用。其他钩子方法仅在客户端被调用。

使用第三方模块

我们可以在应用中使用第三方模块，一个典型的例子是在客户端和服务端使用axios做 HTTP 请求。

首先我们需要安装 npm 包：

npm install --save axios

然后在页面内可以这样使用：

<template>
  <h1>{{ title }}</h1>
</template>

<script>
import axios from 'axios'

export default {
  async asyncData ({ params }) {
    let { data } = await axios.get(`https://my-api/posts/${params.id}`)
    return { title: data.title }
  }
}
</script>

有一个值得注意的问题是，如果我们在另外一个页面内也引用了axios，那么在应用打包发布的时候axios会被打包两次，而实际上我们只需要打包一次。这个问题可以通过在nuxt.config.js里面配置build.vendor来解决：

module.exports = {
  build: {
    vendor: ['axios']
  }
}

经过上面的配置后，我们可以在任何页面里面引入axios而不用担心它会被重复打包。

使用 Vue 插件

假如我们想使用vue-notifications显示应用的通知信息，我们需要在程序运行前配置好这个插件。

首先增加文件plugins/vue-notifications.js：

import Vue from 'vue'
import VueNotifications from 'vue-notifications'

Vue.use(VueNotifications)

然后, 在nuxt.config.js内配置plugins如下：

module.exports = {
  plugins: ['~/plugins/vue-notifications']
}

想了解更多关于plugins的配置方法，请参考插件 API 文档。

实际上，vue-notifications会被打包至应用的脚本代码里，但是它属于第三方库，我们理应将它打包至库文件里以获得更好的缓存效果。（译者注：应用代码比库文件修改频繁，应尽量将第三方库打包至单独的文件中去）。

我们可以更新nuxt.config.js文件，在vendor构建配置项里添加vue-notifications：

module.exports = {
  build: {
    vendor: ['~/plugins/vue-notifications']
  },
  plugins: ['~/plugins/vue-notifications']
}

只在浏览器里使用的插件

有些插件可能只是在浏览器里使用，所以你可以用ssr: false变量来配置插件只从客户端还是服务端运行。

举个例子：

nuxt.config.js:

module.exports = {
  plugins: [
    { src: '~/plugins/vue-notifications', ssr: false }
  ]
}

plugins/vue-notifications.js:

import Vue from 'vue'
import VueNotifications from 'vue-notifications'

Vue.use(VueNotifications)

同样地，如果有些脚本库你只想在服务端使用，在 Webpack 打包server.bundle.js文件的时候会将process.server变量设置成true。