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文件自動映射到/跟目錄，所以可以和上面這樣引入

 

 

 

 

 

。