nuxt引入jquery和bootstrap

nuxt中可以在页面的head中单独引入，也可以在nuxt.config.js文件中设定的默认head中引入，自己看情况而定；

那么有两种方式可以将第三方库引入到项目里面：

一种是npm 一种是CDN，下面都说一下：

第一种npm的方式下载到本地引入：

npm install --save jquery

然后在nuxt.config.js中

const webpack = require('webpack')
module.exports = {
    build: {
        
        plugins: [
          new webpack.ProvidePlugin({
            '$': 'jquery'
          })
        ]
    },
    plugins: []
}

在页面汇总测试一下：

export default {
        mounted () {
            $("body").append("1");
        },
}

第二种引入方式：

nuxt.config.js

module.exports = {
    head: {
        script: [
          { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' }
        ]
    },
}

当然也可以在某一个页面中的head中引入

那么自己写的轮播什么的插件应该怎么引入呢？

我们需要将自己写的插件js以及css放在static文件夹下：

然后在引入：

export default {
        head: {
            script: [
              { src: 'js/move.js' }
            ],
            link: [
              { rel: 'stylesheet', href: 'css/zzsc.css' }
            ]
        },

}

这里需要提醒的是，static文件自动映射到/跟目录，所以可以和上面这样引入

 

 

 

 

 

。