Vue.js教程
9.9 插件
阅读(

Vue.js 基础

Vue.js 过渡和动画

Vue.js 可复用性和组合

Vue.js 工具

Vue.js 模块化

Vue.js 响应式系统原理

Vue.js API

Vue.js 服务器端渲染 SSR

Vue.js 服务端渲染 Nuxt.js

Nuxt.js简介

Nuxt.js安装

Nuxt.js目录结构

Nuxt.js配置

Nuxt.js路由

Nuxt.js视图

Nuxt.js异步数据

Nuxt.js资源文件

Nuxt.js插件

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

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

使用第三方模块

我们可以在应用中使用第三方模块,一个典型的例子是在客户端和服务端使用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

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验