前后端不分离项目中怎么使用vue.js和bootstrap

前后端不分离项目中怎么使用vue.js和bootstrap

1.导入vue.js到html中

远程链接配置

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

vue2的网址

https://v2.cn.vuejs.org/v2/guide

使用bootcdn下载vue.js

https://www.bootcdn.cn/vue/

ctrl+s直接保存源代码，然后加入在项目中
在html中引入静态的js文件

<script src="js/vue.main.js"></script>

验证是否加入成功，注意：所有的便签都必须放在一个id为app的div标签下面，不然vue无法获取到页面元素，就无法绑定

<script>
    new Vue({
        el:'#app',
        data(){
            return {
                msssage: '测试vue是否嵌入成功',
            }
        }
    })
</script>

使用模板引擎在页面上渲染出来

<div id="app">
    <div style="border:1px solid #ccc;margin: 100px auto;text-align: center;width:400px">
        {{msssage}}
        <div>
            账号:<input type="text" id="username"/>
        </div>
        <div>
            密码为:<input type="password" id="password"/>
        </div>
        <div>
            <button onclick="login()">登录</button>
        </div>
    </div>
</div>

在头部中出现上述文字即为导入vue.js成功

2.引入bootstrap

我们在这里使用bootstrapV5

https://www.bootcss.com/

复制bootstrap中的main.css

复制bootstrap.bundle.min.js

最后一步需要加入的资源就是：
安装图标库，解压之后检索bootstrap-icons中的css文件同时还需要复制font下面的fonts文件夹到css里面即可，切记在作完这些之后还需要关闭项目，然后重新打开
关闭之后重新打开idea

测试bootstrap能否运行，是否生效，找到组件中的按钮，复制clss中的内容加入到我们的button中即可
上述操作之后在页面中依然没有显示

这个时候控制台出现了两个错误

这个错误的原因很基本，就是引入的css的方式不对，是通过link标签来引入的，因为疏忽在这里使用了和js文件同样和引入方式

使用link引入就没有什么问题了,在这里千万不要犯这种低级错误

<link rel="stylesheet" href="css/bootstrap.min.css">

然后使用里面的一个button效果如图

美化之后的登录页面

<div id="app">
    <div style="border:1px solid #ccc;margin: 200px auto;text-align: center;width:400px;height: 300px;padding: 30px 0 50px 0;border-radius: 10px;box-shadow: 0 0 10px rgba(0,0,0,.2)">
        <div style="width:80%;margin:0 auto;">
            <div id="font_denglu" style="font-size: 30px;font-weight: bolder">登录</div>
            <div class="input-group mb-3">
                <span class="input-group-text" id="basic-addon1"><i class="bi bi-person-circle"></i></span>
                <input id="username" type="text" class="form-control" placeholder="请输入账号" aria-label="Username" aria-describedby="basic-addon1" v-model="username">
            </div>
            <div class="input-group mb-3">
                <span class="input-group-text" id="basic-addon2"><i class="bi bi-file-earmark-lock2"></i></span>
                <input type="password" class="form-control" placeholder="请输入密码" aria-label="Username" aria-describedby="basic-addon1" id="password" v-model="password">
            </div>
            <div>
                <button type="button" class="btn btn-primary" @click="login()" style="width:100%;margin:10px auto">登录</button>
            </div>
        </div>
    </div>
</div>

效果图：