Vue.js集成Bootstrap4

发表于 2018-05-09 更新于 2019-08-22 阅读次数：

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

环境配置

vue-cli: 2.x

集成过程

创建Vue.js工程

1 2	npm install -g vue-cli vue init webpack project_name

安裝 Sass-loader / node-sass

1	npm install sass-loader node-sass --save-save

安裝BootStrap / jQuery / Popper

1	npm install bootstrap jquery popper.js --save

配置build/webpack.base.conf.js

module.exports = {
  ...
  // 新增plugins
  plugins: [
    new webpack.ProvidePlugin({
        '$': "jquery",
        'jQuery': "jquery",
        'Popper': 'popper.js'
    })
  ],
  ...
}

在src/main.js中载入Bootstrap

1 2	import 'bootstrap' import 'bootstrap/dist/css/bootstrap.css'

使用Bootstrap和sass编写Vue.js组件

参考链接

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

0%