[Vue3.0]引入BootStrap

  • 进入项目目录
$ 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>

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