vue引用BootStrap以及引用bootStrap-vue.js

淩亂°似流年 2023-10-18 15:09 135阅读 0赞

## 1.先引入jquery ##

*  1.先使用指令:

> npm install jquery --save-dev

*  2.在webpack.base.conf.js（如果是是开发\[dev\]环境则在webpack.dev.conf.js；两个文件都在bulid目录下；请一定注意，我在操作的时候就是找错了文件，半天都没有弄对；）中添加如下内容：

const webpack = require('webpack')
      plugins:[
    new webpack.ProvidePlugin({
        
                $: "jquery",
                jQuery: "jquery"
            }),
    ]

*  3.在main.js进行注册

> import $ from ‘jquery’  
> 到此jquery就引入结束了，接着看如何引入传统的bootStrap

## 2.引入BootStrap ##

*  1.使用指令:

> npm install bootstrap --save-dev

*  2.安装成功后，能够在package.json文件夹中看到bootstrap这个模块。这时候需要在main.js中添加如下内容:

import 'bootstrap/dist/css/bootstrap.min.css'
    import 'bootstrap/dist/js/bootstrap.min'

至此bootStrap也引入结束，接下来我们的重点来了，因为BootStrap与VUE有一个专门的设计叫做bootstrap-vue.js，所以我们引入它之后就可以直接使用它们提供的专有样式，比原生的bootStrap要好看很多

*  1.使用指令:

> npm i vue bootstrap-vue bootstrap

*  2.在main.js文件中添加:

import Vue from 'vue'
    import BootstrapVue from 'bootstrap-vue'
    import 'bootstrap/dist/css/bootstrap.css'
    import 'bootstrap-vue/dist/bootstrap-vue.css'
    
    Vue.use(BootstrapVue)

至此所有的引用均都结束了  
下面附上 bootStrap-vue的官方api，[点击此处查看][Link 1]

[Link 1]: https://bootstrap-vue.js.org/docs/

发表评论取消回复

表情：

评论列表（有 0 条评论，135人围观）

还没有评论，来说两句吧...

相关阅读

相关 Java中的弱引用、软引用以及最终引用的区别实践

在Java中，弱引用（WeakReference）、软引用（SoftReference）和最终引用（PhantomReference）是三种不同的引用类型，它们主要用于管理对象

深藏阁楼爱情的钟/ 2024年11月11日 16:18/ 0 赞/ 3 阅读

相关 vue引用BootStrap以及引用bootStrap-vue.js

1.先引入jquery 1.先使用指令: > npm install jquery --save-dev 2.在webpack.base.conf.js（

淩亂°似流年/ 2023年10月18日 15:09/ 0 赞/ 136 阅读

相关 vue目录引用

1、../ 表示本目录的上级 2、./表示本目录的同级，如 ![2020120815503221.png][] 在index.js中引用App.vue使用impo

ゝ一纸荒年。/ 2022年12月27日 07:13/ 0 赞/ 95 阅读

相关强引用、软引用、弱引用、虚引用的区别和作用，以及例子

引用大佬的博客： [Java：强引用，软引用，弱引用和虚引用][Java] 建议直接看大佬的博客，我这里只做总结。总结强引用相当于 `Object obj=ne

野性酷女/ 2022年12月24日 14:57/ 0 赞/ 102 阅读

相关 Vue--引用组件

原文网址：[Vue--引用组件\_IT利刃出鞘的博客-CSDN博客][Vue--_IT_-CSDN] 递归简介其他网址 > [Vue中组件的递归使用方法\_

柔光的暖阳◎/ 2022年12月22日 11:15/ 0 赞/ 156 阅读

相关【vue】vue引用jquery

> `前言` 转载：[https://www.cnblogs.com/zhoujuan/p/11713746.html][https_www.cnblogs.com_zhou

- 日理万妓/ 2022年10月23日 01:56/ 0 赞/ 183 阅读

相关 bootstrap本地引用

下载了bootstrap以后，最关键的文件夹，就是dist，基础使用只要引入这里面的文件就可以解决了两个晚上了。目标：一个下拉菜单，其实是<a>，点了以后，下

阳光穿透心脏的1/2处/ 2022年09月27日 12:30/ 0 赞/ 160 阅读

相关 bootstrap引用glyphicon图标无法显示

一开始直接引用的时候总是不显示，但是可以直接引入icon图标，查阅了一下相关文档，原来是glyphicon图标无法被跨域显示。如果直接用网页链接就可以显示，所以，若想在本地文件

àì夳堔傛蜴生んèń/ 2022年08月19日 11:12/ 0 赞/ 321 阅读

相关 Bootstrap 在线引用

Bootstrap 3.3.0 js 文件 `<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstr

淡淡的烟草味﹌/ 2022年05月05日 10:57/ 0 赞/ 268 阅读

相关 bootstrap字体图标引用

qq群： 581478349 <!DOCTYPE html> <html> <head> <title></titl

缺乏、安全感/ 2021年09月18日 13:50/ 0 赞/ 463 阅读