nuxt.js 引入第三方插件

àì夳堔傛蜴生んèń 2022-06-01 22:48 702阅读 0赞

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.在页面里面就可以直接调用了

<div @click="shuffle"> <transition-group name="cell" tag="ul" class="side_tag" > <li v-for="cell in cells" :key="cell.id" class="cell"> { { cell.number }} </li> </transition-group> </div>

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
                }
              })
          }
        }
      }