首页 > 其他 > 详细

[Vue3.0]引入BootStrap

时间:2020-03-14 13:11:16      阅读:210      评论:0      收藏:0      [点我收藏+]
  • 进入项目目录
$ cd myweb
  • 安装BootStrap
# save 将BootStrap库作为package存到package-lock.json中去
# --save-exact 精确版本号
    "bootstrap": {
      "version": "4.4.1",
      "resolved": "https://registry.npm.taobao.org/bootstrap/download/bootstrap-4.4.1.tgz",
      "integrity": "sha1-hYKWDuoMXNK+3oTYsLrzeJw+iwE="
    },

 $ npm install bootstrap --save --save-exact


npm WARN ajv-keywords@3.4.1 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
npm WARN bootstrap@4.4.1 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself.
npm WARN bootstrap@4.4.1 requires a peer of popper.js@^1.16.0 but none is installed. You must install peer dependencies yourself.

  • bootstrap@4.4.1
    added 1 package from 2 contributors in 11.531s

26 packages are looking for funding
run npm fund for details

  • 编辑main.js主程序,导入bootstrap
import 'bootstrap/dist/css/bootstrap.min.css'
  • 编辑App.vue文件
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <hr>
    <button class="btn btn-primary">确定</button>
    <button class="btn btn-success">使用</button>
    <button class="btn btn-danger">注意</button>
    <hr>
    <router-view/>
  </div>
</template>

技术分享图片

[Vue3.0]引入BootStrap

原文:https://www.cnblogs.com/leoshi/p/12491071.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!