当前位置: 首页 > Web前端 > vue.js

在Vuecli3中引入bootstrap

时间:2023-03-31 20:39:56 vue.js

在vue项目中引入bootstrap,首先必须引入两个依赖:jQuery和popper第一步、安装1、npm安装安装命令如下:cnpminstallbootstrap--save-devcnpminstalljquery--save-devcnpminstallpopper.js--save-dev默认安装最新版本。如果想安装V3版本的bootstrap(依赖less),可以:cnpminstallbootstrap@3--save-dev或者,使用visualwindowinstallation2,visualwindowinstallation1,找到:project>Dependency>+InstallDependency>Rundependencysearchandinstalljqueryandpopper.js2,find:Project>Dependency>+InstallDependency>DevelopmentDependencySearchandinstallbootstrap第二步导入到mian.js页面,写入如下代码//引入jQuery,bootstrapimport$from'jquery'import'bootstrap'//引入bootstrap样式import'bootstrap/dist/css/bootstrap.min.css'import'bootstrap/dist/js/bootstrap.min.js'//全局注册$vue.prototype.$=$第三步,在vue.config.js中配置jQuery,编写如下代码(如果没有vue.config.js,手动在package.json同级创建)constwebpack=require("webpack")module.exports={//配置插件参数configureWebpack:{plugins:[//配置jQuery插件参数newwebpack.ProvidePlugin({$:'jquery',jQuery:'jquery','window.jQuery':'jquery',Popper:['popper.js','default']})]}}然后,就可以使用测试bootstrap