Vue.js集成Bootstrap4

发表于 | 更新于 | 评论数： | 阅读次数：

记录在Vue.js中集成Bootstrap4的方法，防止忘了！

环境配置

  • vue-cli: 2.x

集成过程

  1. 创建Vue.js工程
    1
    2
    npm install -g vue-cli
    vue init webpack project_name
  2. 安裝 Sass-loader / node-sass
    1
    npm install sass-loader node-sass --save-save
  3. 安裝BootStrap / jQuery / Popper
    1
    npm install bootstrap jquery popper.js --save
  4. 配置build/webpack.base.conf.js
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    module.exports = {
      ...
      // 新增plugins
      plugins: [
        new webpack.ProvidePlugin({
            '$': "jquery",
            'jQuery': "jquery",
            'Popper': 'popper.js'
        })
      ],
      ...
    }
  5. 在src/main.js中载入Bootstrap
    1
    2
    import 'bootstrap'
    import 'bootstrap/dist/css/bootstrap.css'
  6. 使用Bootstrap和sass编写Vue.js组件

参考链接

  1. Bootstrap Webpack,by bootstrap homepage.
  2. Setup Bootstrap 4 With Vue Cli 3 Webpack,by lua software code.
  3. Adding Bootstrap to a Vue CLI Project,by Travis Horn.