在vue-cli脚手架项目中使用bootstrap框架和jquery

在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'