在vue-cli脚手架项目中使用bootstrap框架和jquery
2022年09月28日
715
在vue-cli脚手架项目中使用bootstrap框架
我们在项目中，使用bootstrap，必须要 先引入 jquery。不引入jquery，会报bug。因为boostrap依赖jquery。
一、先在项目中使用npm命令，安装bootstrap和jquery
npm install jquery bootstrap@3 -S
安装完毕后，到当前项目中的package.json中查看，是否安装成功
二、在public目录的index.html文件中直接引入jquery
你需要 事先，把你 下载到当前项目中的 jquery，复制，拿到 public目录中
<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
测试：
到组件中，测试，jquery到底能不能正常使用？
cartTotal.vue组件中：
<template>
<div class="footer">
<span id="total">总价：100</span>
<button class="btn btn-primary" @click="test">结算</button>
</div>
</template>
<script>
export default {
name: 'cartTotal',
data() {
return {
};
},
mounted() {
},
methods: {
test(){
console.log($('#total').html());
}
},
};
</script>
<style lang="scss" scoped>
</style>预览：
二、在main.js中引入bootstrap
// 引入bootstrap框架 import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap/dist/js/bootstrap.min.js'
