Nuxt.js项目如何全局引入Bootstrap,Font Awesome等第三方库

在Nuxt.js项目中引入三方库有多种方式,比如使用npm安装、nuxt.config.js文件中引入。我这里使用的是cdn,所以选的是后者。方法如下:
module.exports = {
    //其他配置...
    head: {
        title: 'Nuxt-App',
        meta: [
          { charset: 'utf-8' },
          { name: 'viewport', content: 'width=device-width, initial-scale=1' },
          { hid: 'description', name: 'description', content: "project description here" }
        ],
        link: [
          { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
          { rel: 'stylesheet', href: 'https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css' },
          { rel: 'stylesheet', href: 'https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css' }
        ],
        script:[
          {src:'https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js'},
          {src:'https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js'}
        ]
      },
     //更多其他配置...
}

我们可以在 nuxt.config.js 文件的head属性中配置很多东西,比如:标题、关键字、meta信息、全局样式、JS库等。更多内容请参考官方文档:API: head 属性配置 - Nuxt.js

the end

热门文章