前端--vue如何引用bootsrap

npm 安装的方式引入bootsrap

1.安装jquery

cnpm install jquery --save-dev

在bulid下面的webpack.dev.conf.js下增加以下配置

  plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
    //add start
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    }),
    //add end
    new webpack.HotModuleReplacementPlugin(),

 

2.在main.js中加入如下代码：

import jquery from "jquery";

3.安装bootstrap

cnpm install bootstrap--save-dev

安装完可能会提示报错

运行提示的语句 cnpm install --save popper.js

按照提示进行安装

cnpm install --save popper.js

 

4.在package.json里可以看到安装的bootstrap及jquery模块

    "babel-preset-stage-2": "^6.22.0",
    "bootstrap": "^4.4.1",
    "chalk": "^2.0.1",

    "html-webpack-plugin": "^2.30.1",
    "jquery": "^3.5.0",
    "node-notifier": "^5.1.2",

5.在main.js引入bootstrap

import 'bootstrap/dist/js/bootstrap.min.js'
import 'bootstrap/dist/css/bootstrap.min.css'

6.测试是否安装成功

<template>

  <div id="login">

    <div class="row mx-auto w-75">
      <div class="col-6">
        <div class="btn-group">
          <button type="button" class="btn btn-outline-info btn-sm" data-toggle="modal" data-target="#myModal">新增</button>
          <button type="button" class="btn btn-outline-primary btn-sm" @click="saveRows">保存</button>
        </div>
        <button type="button" class="btn btn-outline-warning btn-sm" @click="delRows">删除</button>
      </div>
      <div class="col-6">
        <div class="input-group">
          <input type="text" class="form-control input-group-sm" placeholder="输入设备编号进行搜索">
          <span class="input-group-btn">
                        <button class="btn btn-default" type="button"><i class="fa fa-search"></i></button>
                    </span>
        </div>
      </div>
    </div>

    <div class="row mx-auto w-75">
      <div class="col-12">
        <table class="table table-hover table-success">
          <thead class="thead-default">
          <tr>
            <th><input type="checkbox"></th>
            <th>序号</th>
            <th>设备编号</th>
            <th>设备名称</th>
            <th>设备状态</th>
            <th>采购日期</th>
            <th>设备管理员</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(facility,index) in facilities">
            <td><input type="checkbox" :value="index" v-model="checkedRows"></td>
            <td>{{index+1}}</td>
            <td>{{facility.code}}</td>
            <td>{{facility.name}}</td>
            <td>{{facility.states}}</td>
            <td>{{facility.date}}</td>
            <td>{{facility.admin}}</td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>


  </div>
</template>

正在上传…重新上传取消

已经成功安装，以上是我自己亲测的安装boostrap的方法，还有一种是直接在index.html里面引入，bootstrap的在线链接，我尝试过但没有生效 ，大家也可以选择那一种方法试试看。