从0开始Vue2集成Bootstrap4(1)

满大街的复制粘贴腻歪了,就来看看最精简实用的吧!

我并非专业前端,如果有错误请大家指点~

本文使用yarn安装vue和依赖,npm自行使用。

一、安装Vue

《从0开始Vue2集成Bootstrap4(1)》

二、安装jquerybootstrap, popper.jsnode-sasssass-loader

《从0开始Vue2集成Bootstrap4(1)》

《从0开始Vue2集成Bootstrap4(1)》

bootstrap依赖
jquery
popper.js

由于集成到
Vue,所以不使用
script标签引入
bootstrap.bundle.js,因此需要安装
popper.js

由于我习惯使用SCSS引入bootstrap的css样式,所以需要安装node-sasssass-loader。如果是引入编译后的css,可以不安装。

sass-loader对于其他博客说的,需要配置webpack,但是我发现,根本不用配置什么,vue也会识别scss,build后也会解析。知道原因的可以跟我讲解一下。

BS源码浅读

源码bsvue/node_modules/bootstrap/js/src/index.js

import $ from 'jquery'
import Alert from './alert'
...

由此可见,boostrap自动引入了jquery

编译后的bsvue/node_modules/bootstrap/dist/js/bootstrap.js

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('jquery'), require('popper.js')) :
  typeof define === 'function' && define.amd ? define(['exports', 'jquery', 'popper.js'], factory) :
  (factory((global.bootstrap = {}),global.jQuery,global.Popper));
}...

这段代码,整体意思我一个非专业人士就不懂了。但是可以根据源码看出,这是引入了jquerypopper.js
既然jquery会判断并且自动加载,那么接下来就简单了:

运行项目

npm run dev

bsvue/src/App.vue引入bootstrap样式,这里不加scoped属性,是为了全局使用。

<style lang="scss">
@import '~bootstrap/scss/bootstrap.scss';
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

添加示例代码

修改bsvue/src/components/HelloWorld.vue文件,先加入几个不需要js的组件进来看看样式是否有了

《从0开始Vue2集成Bootstrap4(1)》

效果:

《从0开始Vue2集成Bootstrap4(1)》

接下来加入需要js的组件试试
首先bsvue/src/main.js引入bootstrap

import 'bootstrap'

bsvue/src/components/HelloWorld.vue加入轮播图组件

    <div class="container">
      <div id="indicators" class="carousel slide w-100" data-ride="carousel" data-keyboard="false" data-pause="hover" data-interval="5000">
        <ol class="carousel-indicators">
          <li data-target="#indicators" data-slide-to="0" class="active"></li>
          <li data-target="#indicators" data-slide-to="1"></li>
          <li data-target="#indicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img class="d-block w-100" src="../assets/1.jpg">
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="../assets/2.jpg">
          </div>
          <div class="carousel-item">
            <img class="d-block w-100" src="../assets/6.jpg">
          </div>
        </div>
        <a class="carousel-control-prev" href="#indicators" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        </a>
        <a class="carousel-control-next" href="#indicators" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
        </a>
      </div>
    </div>

效果:

《从0开始Vue2集成Bootstrap4(1)》

完美运行~~

不足请指出

转载请留出处~谢谢~

    原文作者:php4world
    原文地址: https://segmentfault.com/a/1190000015706096
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞
Scroll Up