vue webpack引入Bootstrap编写demo测试可用

1.什么是bootstrap？

        Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。 Bootstrap 是一个用于 HTML、CSS 和 JS 开发的开源工具包。利用 Bootstrap 提供的 Sass 变量和混合（mixins）、响应式栅格系统、可扩展的预制组件以及强大的 jQuery 插件，能够让你快速地开发出产品原型或构建整个 app。

 

2.怎么引入到webpack项目中达到可用状态？

           

step1:打开bootstrap官网找到JS文件CDN和Css文件CDN： https://v4.bootcss.com/docs/getting-started/introduction/

               

<!--bootstrap Css cdn node-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<!--bootstrap Js cdn node-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

           step2:在项目中index.html文件中引入bootstrap CSS CDN和js 文件CDN

                     

          

  step3:写一个demo来测试下bootstrap是否已经正常可用

                    

        ①在src/views文件夹下创建一个testBootstrap.vue文件并插入如下代码

                        

@author: java.boy
@desc：测试bootstrap是否安装成功
@date: 2020-05-21 17:06:06
@Email：395501344@qq.com
<template>
<div class='container'>
    <div>
      <button type="button" class="btn btn-primary">Primary</button>
      <button type="button" class="btn btn-secondary">Secondary</button>
      <button type="button" class="btn btn-success">Success</button>
      <button type="button" class="btn btn-danger">Danger</button>
      <button type="button" class="btn btn-warning">Warning</button>
      <button type="button" class="btn btn-info">Info</button>
      <button type="button" class="btn btn-light">Light</button>
      <button type="button" class="btn btn-dark">Dark</button>
      <button type="button" class="btn btn-link">Link</button>
    </div>
    <div class="card" style="width: 18rem;">
        <img src="" class="card-img-top" alt="">
        <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
</div>
</template>


<script>
export default {
components: {},
data() {
return {


}
}
}
</script>
<style  scoped>
</style>

 

        ②在src/routes.js 静态路由表中增加新视图页面的路由

/*
* author: java.boy
* desc：routes.js 静态路由表
* date: 2020-05-21 14:26:15
* Email：395501344@qq.com
*/


//1.引入写好的视图页面
import Home from './views/Home.vue'
import Products from './views/Products.vue'
import TestBootstrap from './views/testBootstrap.vue'


//暴露一个【静态】的路由数组
export const routes = [
    //home页面
    {
        path:'/home',
        name:'myHome',
        component:Home
    },
    //商品页面
    {
        path:'/Products',
        name:'myProducts',
        component:Products
    },
    //2.testBootstrap页面路由
    {
        path:'/TestBootstrap',
        name:'TestBootstrap',
        component:TestBootstrap
    }
]

 

                        

        ③运行程序

        

npm run dev //启动vue

       ④在地址栏输入： http://localhost:8080/#/TestBootstrap 出现如下效果恭喜你嵌入成功

 

 

注：文章只介绍了如何通过CDN方式引入Bootstrap，CDN有时候会因网络等原因出现无法加载到文件的情况。

 

THE END

如果你觉得这篇文章对你有帮助可以动动小手给作者点个关注或反手来个赞，你的鼓励对作者来说很重要，我会不定期更新更多内容。

+Q群交流 ：189195811（或搜索 Java程序猿）