在vue-cli项目中使用bootstrap的方法示例
程序员文章站
2022-07-06 09:09:00
在一个html页面中加入bootstrap是很方便,就是一般的将css和js文件通过link和script标签就行。
那么在一个用vue-vli生成的前端项目中如何加...
在一个html页面中加入bootstrap是很方便,就是一般的将css和js文件通过link和script标签就行。
那么在一个用vue-vli生成的前端项目中如何加入?因为框架不一样了,略微要适应一下。
安装插件
npm install jquery --save npm install bootstrap --save npm install popper.js --save
配置webpack.base.conf.js
//在顶部添加 const webpack = require('webpack')
//在module.exports = {}末尾添加下面代码 module.exports = { ... plugins: [ new webpack.provideplugin({ $: "jquery", jquery: "jquery" }) ] }
main.js中添加
import $ from 'jquery' import 'bootstrap'
测试jquery
//在vue文件中添加测试代码 <script> $(function () { alert('234') }) export default { name: 'app' } </script>
测试bootstrap
<template> <div class="container"> <div class="row"> <div class="col-md-6"> <button class="btn btn-primary">测试按钮</button> </div> </div> </div> </template>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 孩子睡觉不踏实怎么办? 如何让宝宝睡整觉
下一篇: 小孩不吃青菜怎么办!轻松教你解决问题
推荐阅读
-
在Spring Boot中使用swagger-bootstrap-ui的方法
-
使用python中的in ,not in来检查元素是不是在列表中的方法
-
使用Xcode为iOS应用项目创建PCH文件的方法及应用示例
-
在vue项目中正确使用iconfont的方法
-
在 Laravel 项目中使用 webpack-encore的方法
-
C#接口在派生类和外部类中的调用方法示例
-
SqlServer2005中使用row_number()在一个查询中删除重复记录的方法
-
在react中使用vue的状态管理的方法示例
-
web.py在SAE中的Session问题解决方法(使用mysql存储)
-
在小程序Canvas中使用measureText的方法示例