引入bootstrap

1.安装依赖包：

  cnpm install bootstrap --save-dev
  cnpm install jquery --save-dev
  cnpm install popper.js --save-dev

2.将bootstrap全局引入。
在项目中根目录西main.js中添加如下代码：

import 'bootstrap'

引入jquery同理,可在main.js添加下面一行：

import  'jquery'

3.将bootstrap css资源引入到相关页面中。
和普通的html直接link css文件资源不同，对于基于组件化的vue项目，我们需要在相关需要使用的vue文件中添加如下代码：

<script>
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
</script>

如果Home.vue为Article.vue的父组件，那么想css作用于Article.vue,只需要在Home.vue添加上述两行import即可。

但是，上面的并不好用

网页头部添加    <link rel="stylesheet" href="./bootstrap/css/bootstrap.css" />

 
body尾部添加
<script type="text/javascript" src="./bootstrap/js/jquery-3.6.0.min.js"></script>
 <script type="text/javascript" src="./bootstrap/js/bootstrap.bundle.js" ></script>
 
vue中引入bootstrap/*
 * @Author: your name
 * @Date: 2021-11-09 15:15:46
 * @LastEditTime: 2021-11-10 15:32:28
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \qlzy\vite.config.js
 */

const path = require("path");
// vite.config.js # or vite.config.ts

console.log(path.resolve(__dirname, "./src"));

module.exports = {
  /**
   * 在生产中服务时的基本公共路径。
   * @default '/'
   */
  base: "./",
  /**
   * 与“根”相关的目录，构建输出将放在其中。如果目录存在，它将在构建之前被删除。
   * @default 'dist'
   */
  publicPath: "./",
  outDir: "dist",
  port: 3000,
  // 是否自动在浏览器打开
  open: true,
  // 是否开启 https
  https: false,
  // 服务端渲染
  ssr: false,
  /*// 引入第三方的配置
  optimizeDeps: {
    include: ["moment", "echarts", "axios", "mockjs"]
  },*/
  alias: {
    // 键必须以斜线开始和结束
    "/@/": path.resolve(__dirname, "./src"),
    // '/@components/': path.resolve(__dirname, './src/components')
  },
  /*proxy: {
    // 如果是 /lsbdb 打头，则访问地址如下
    '/lsbdb': 'http://10.192.195.96:8087',
    // 如果是 /lsbdb 打头，则访问地址如下
    // '/lsbdb': {
    //   target: 'http://10.192.195.96:8087/',
    //   changeOrigin: true,
    //   // rewrite: path => path.replace(/^\/lsbdb/, '')
    // }
  }*/
};