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

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

1.导入vue.js到html中

远程链接配置

vue2的网址

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

使用bootcdn下载vue.js

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

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

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

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

    

        {{msssage}}
        

            账号:
        
        

            密码为:
        
        

            登录
        
    

在头部中出现上述文字即为导入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引入就没有什么问题了,在这里千万不要犯这种低级错误

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

美化之后的登录页面

    

        

            
登录
            

                
                
            
            

                
                
            
            

                登录
            
        
    

效果图：