[Vue3.0]引入BootStrap

leoshi 2021-12-15 原文

$ 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>