欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

nuxt.js引入第三方插件的教程

程序员文章站 2022-05-25 08:50:19
plugins 属性配置 src: string (文件的路径) ssr: boolean (默认为 true) 如果值为 false,该文件只会在客户端被打包引入。 plu...

plugins 属性配置

src: string (文件的路径)

ssr: boolean (默认为 true) 如果值为 false,该文件只会在客户端被打包引入。

plugins 属性使得你可以轻易地为 nuxt.js 配置使用 vue.js 插件。

例如 (nuxt.config.js):

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

然后, 我们需要创建 plugins/vue-notifications.js 文件:

import vue from 'vue'
import vuenotifications from 'vue-notifications'

vue.use(vuenotifications)

plugins 属性配置的所有插件会在 nuxt.js 应用初始化之前被加载导入。

每次你需要使用 vue.use() 时,你需要在 plugins/ 目录下创建相应的插件文件,并在 nuxt.config.js 中的 plugins 配置项中配置插件的路径。


这是官方文档的引入方式,但是实际用起来还是有点麻烦,例如开发的时候需要引入自己写的库,或者引入一些没打包成npm 的第三方插件,直接用vue 这个大对象引入有点麻烦

这个时候你可以把对象绑定在window对象上,但是这样会有个问题,就是调用的时候必须要有window对象才行

以官方文档的lodash.js 库为例

1. npm i --save lodash 下载lodash

2. 在nuxt.config.js里面插入 ,注意ssr必须为false

  plugins: [
    {src: '~plugins/lodash.js', ssr: false}
  ],

3.在 /plugins 文件夹下创建 lodash.js

let _ = require('lodash')

window._ = _

4.在页面里面就可以直接调用了

  export default {
    methods: {
      shuffle () {
        console.log()
        //        this.taglist = _.shuffle()
        this.cells = window._.shuffle(this.cells)
      }
    },
    data () {
      return {
        taglist: {},
        cells: array.apply(null, {length: 14})
          .map(function (_, index) {
            return {
              id: index,
              number: index % 9 + 1
            }
          })
      }
    }
  }