如何操作vue-cli项目中使用bootstrap

这次给大家带来如何操作vue-cli目中使用bootstrap,操作vue-cli项目中使用bootstrap的注意事项有哪些,下面就是实战案例,一起来看一下。

在一个html页面中加入bootstrap是很方便,就是一般的将css和js文件通过Link和Script标签就行。

那么在一个用vue-vli生成的前端项目中如何加入?因为框架不一样了,略微要适应一下。

安装插件

npm install jquery --savenpm install bootstrap --savenpm 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文件中添加测试代码$(function () { alert('234')})export default { name: 'App'}

登录后复制

测试bootstrap

登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

怎样使用vue.js与element-ui实现菜单树形结构

怎样使用vue内.sync修饰符

以上就是如何操作vue-cli项目中使用bootstrap的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2750666.html

(0)
上一篇 2025年3月8日 05:40:16
下一篇 2025年2月26日 14:39:39

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 如何使用AngularJs用户输入动态模板XSS攻击

    这次给大家带来如何使用AngularJs用户输入动态模板XSS攻击,使用AngularJs用户输入动态模板XSS攻击的注意事项有哪些,下面就是实战案例,一起来看一下。 概述 XSS攻击是Web攻击中最常见的攻击方法之一,它是通过对网页注入可…

    编程技术 2025年3月8日
    200
  • 如何使用vue传递数据

    这次给大家带来如何使用vue传递数据,使用vue传递数据的注意事项有哪些,下面就是实战案例,一起来看一下。 组件(Component)是 Vue.js 最强大的功能。组件可以封装可重用的代码,通过传入对象的不同,实现组件的复用,但组件传值就…

    2025年3月8日 编程技术
    200
  • 如何使用vue中ajax请求和axios包

    这次给大家带来如何使用vue中ajax请求和axios包,使用vue中ajax请求和axios包的注意事项有哪些,下面就是实战案例,一起来看一下。 + 首先,引入axios CDN: npm: npm install axios 并在全局的…

    编程技术 2025年3月8日
    200
  • 怎样使用vue项目中api接口

    这次给大家带来怎样使用vue项目中api接口,使用vue项目中api接口的注意事项有哪些,下面就是实战案例,一起来看一下。 1. 在axiosconfig目录下的axiosConfig.js import Vue from ‘vue’imp…

    编程技术 2025年3月8日
    200
  • 怎样使用vue子组件向父组件传递数据

    这次给大家带来怎样使用vue子组件向父组件传递数据,使用vue子组件向父组件传递数据的注意事项有哪些,下面就是实战案例,一起来看一下。 如下图所示: 当没有任何操作的时候父组件的值是 0 当点击加号以后父组件的值是 1 当点击减号以后父组件…

    2025年3月8日
    200
  • jQuery中$. 与 $().使用

    这次给大家带来jQuery中$. 与 $().使用,jQuery中$. 与 $().使用的注意事项有哪些,下面就是实战案例,一起来看一下。  像我这种没有经过系统学习的人总是有这样的问题:( $就是jQuery的别称 而jQuery就是jQ…

    编程技术 2025年3月8日
    200
  • 如何使用react redux

    这次给大家带来如何使用react redux,使用react redux的注意事项有哪些,下面就是实战案例,一起来看一下。 环境准备 为了方便,这里使用create-react-app搭建react环境 create-react-app m…

    编程技术 2025年3月8日
    200
  • 如何使用react-redux插件

    这次给大家带来如何使用react-redux插件,使用react-redux插件的注意事项有哪些,下面就是实战案例,一起来看一下。 react-redux简介 react-redux是使用redux开发react时使用的一个插件,另外插一句…

    编程技术 2025年3月8日
    200
  • 如何使用JS倒计时恢复按钮点击功能

    这次给大家带来如何使用JS倒计时恢复按钮点击功能,使用JS倒计时恢复按钮点击功能的注意事项有哪些,下面就是实战案例,一起来看一下。 倒计时时间到后,恢复按钮点击,常用于阅读协议: 阅读协议倒计时 var tim=9; function aa…

    2025年3月8日
    200
  • 在Vue组件中如何使用 TypeScript的方法(详细教程)

    typescript不仅可以约束我们的编码习惯,还能起到注释的作用,当我们看到一函数后我们立马就能知道这个函数的用法。这篇文章主要介绍了在vue组件中使用 typescript的方法,需要的朋友可以参考下 注意:此文并不是把vue改为全部替…

    2025年3月8日 编程技术
    200

发表回复

登录后才能评论