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的在线链接,我尝试过但没有生效 ,大家也可以选择那一种方法试试看。