zoukankan      html  css  js  c++  java
  • 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文件自动映射到/跟目录,所以可以和上面这样引入

  • 相关阅读:
    JSChart_页面图形报表
    hdu 2602(dp)
    hdu 1518(dfs)
    hdu 1716(dfs)
    hdu 1002大数(Java)
    SPOJ 375. Query on a tree (树链剖分)
    poj 1091 跳蚤
    HDU 4048 Zhuge Liang's Stone Sentinel Maze
    HDU Coprime
    HDU Machine scheduling
  • 原文地址:https://www.cnblogs.com/fqh123/p/12541138.html
Copyright © 2011-2022 走看看