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

1、先在项目中安装bootstrap和jquery

npm i jquery bootstrap@3 -S

i是install的简写

安装完毕后，在 package.json文件下查看

2.在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>

预览：

2、在main.js中引入bootstrap

// 引入bootstrap框架

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

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