nuxt.js 引入第三方插件
plugins 属性配置src: String (文件的路径)ssr: Boolean (默认为 true) 如果值为 false,该文件只会在客户端被打包引入。plugins 属性使得你可以轻易地为 Nuxt.js 配置使用 Vue.js 插件。例如 (nuxt.config.js):module.exports = {plugins: ['~plugins/vue-notifica
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
}
})
}
}
}
更多推荐
所有评论(0)