Nuxt.js -->插件

当需要引入第三方js库或者自己写了个js函数需要全局引入,根据以下步骤设置(本人以正在用的animejs为例)

  1. 首先获取到第三方包,在项目目录下打开命令行工具输入
npm i animejs -S
  1. 查看根目录下是否存在plugins文件夹,如果没有则手动创建plugins文件夹,同时在文件夹内新建anime.js文件


    plugins文件夹
  2. 在anime.js文件里输入
import Vue from 'vue'
import anime from 'animejs'

Vue.use(anime)
Vue.prototype.anime = anime

这里第二行根据自己引入的文件包自行调整,最后将anime设置在Vue.prototype上,这样全局就可以通过this.anime使用该函数了

  1. 最后打开nuxt.config.js文件,找到plugins配置插件,配置如下:
//nuxt.config.js
export default {
//。。。
  plugins: [
    {
      src: "~/plugins/anime.js",
      ssr: false,
    },
  ],
// 。。。
};

!!!注意这里的ssr:false如果不设置会报错,报错内容为window is not defined
(具体啥原因咱也不清楚,有大佬了解的欢迎留言指点我一下)

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容