如何操作vue-cli项目中使用bootstrap
程序员文章站
2022-03-09 14:27:37
...
这次给大家带来如何操作vue-cli项目中使用bootstrap,操作vue-cli项目中使用bootstrap的注意事项有哪些,下面就是实战案例,一起来看一下。
在一个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> <p class="container"> <p class="row"> <p class="col-md-6"> <button class="btn btn-primary">测试按钮</button> </p> </p> </p> </template>
相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!
推荐阅读:
以上就是如何操作vue-cli项目中使用bootstrap的详细内容,更多请关注其它相关文章!
推荐阅读
-
ThinkJS中如何使用MongoDB的CURD操作
-
如何使用向日葵远程控制软件实现远程控制、管理、操作等一系列项目的图文教程
-
JavaScript开发中如何使用jquery操作session
-
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
-
抖音app如何使用合拍功能?抖音中合拍的操作方法
-
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
-
在vue-cli项目中使用bootstrap的方法示例
-
在Vue中如何使用Cookie操作实例
-
如何使用向日葵远程控制软件实现远程控制、管理、操作等一系列项目的图文教程
-
项目开发中如何定义Redis 使用规范