nuxt.js 引入第三方插件

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: })
          .map(function (_, index) {
            return {
              id: index,
              number: index %  + 
            }
          })
      }
    }
  }