vue引入bootstrap报错找不到模块modules

news/2024/7/10 0:36:36 标签: vue, bootstrap, 引入失败

参考文档:https://segmentfault.com/a/1190000015765805

要使用bootstrap要先分两步,

第一步:引入jQuery

第二步:再引入bootstrap

1、建立一个vue工程。

2、使用命令npm install jquery --save-dev 引入jquery。

3、在webpack.base.conf.js中添加如下内容:

var webpack = require('webpack')

 // 增加一个plugins
plugins: [
  new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery"
  })
],

4、在main.js中添加内容

 import $ from 'jquery'

5、添加完成后,可以在home.vue中尝试jquery是否好用。

6、安装bootstrap,使用命令

npm install bootstrap --save-dev

7、安装成功后,能够在package.json文件夹中看到bootstrap这个模块。这时候需要在main.js中添加如下内容:添加完成后,重新启动程序,npm run dev。就能看到界面中的按钮已经是bootstrap的按钮组了。

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

我是在第7步,路径写错了,不能像下面这样写。

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

 

 


http://www.niftyadmin.cn/n/797836.html

相关文章

vue 实现数字滚动增加效果

参考&#xff1a;http://panjiachen.github.io/countTo/demo/ 效果&#xff1a; 使用vue-countTo插件 安装&#xff1a;npm install vue-count-to 使用&#xff1a; <template> <countTo refexample :startValstartVal :endValendVal :duration2000></coun…

CSS选择器汇总

一、overflow元素overflow : hidden,scroll,auto隐藏或显示滚动条overflow-yoverflow-x二、设置表格间间隔border-collapse: separate;border-spacing: 100px 50px;三、合并单元格border-collapse:collapse;四、border属性border : 1px solid black;border-styleborder-width;b…

vue监听滚动事件 实现元素吸顶

添加滚动监听事件&#xff1a; mounted () { window.addEventListener(scroll, this.handleScroll) }, 页面销毁需要取消监听&#xff1a; destroyed(){ window.removeEventListener(scroll, this.handleScroll) } 使用&#xff1a; <template> <div class&quo…

CSS样式实现左右直线中间文字

/*子导航样式*/ div.subnav-banner { height: 60px; line-height: 60px; text-align: center; width:1180px; margin: 20px auto;} .subnav-banner .line { display: inline-block; width: 44%; border-top: 1px solid #ccc ; } .subnav-banner…

vue跨页面定位到锚点位置

效果&#xff1a; header页面&#xff1a; <a :href"#/about?maodiangsjj">公司介绍</a> <a :href"#/about?maodianfzlc">发展历程</a> <a :href"#/about?maodianryzz">荣誉资质</a> <a :href&quo…

vue页面内部定位到锚点位置

上个文章写了跨页面的锚点定位&#xff0c;锚点的页面是在mounted里调用的定位到锚点位置&#xff0c;只有新打开此页面时才会执行mounted&#xff0c;所以当前页面内进行点击定位到锚点位置不起作用&#xff0c;解决方法在main.js里的watch里一直监听着URL是否发生变化&#x…

IO包之Bits类

Bits类是default类型的并非public类型&#xff0c;所以Bits类仅仅只能被IO包下的类所引用构造方法无参数 所有方法都为静态方法&#xff0c;所以可以直接通过类名去访问其下的所有方法其文件开头写到&#xff1a;/** * Utility methods for packing/unpacking primitive values…

元素使用display: inline-block;后会有间隙的问题

元素使用display: inline-block;后&#xff0c;总是和其他元素出现间隙&#xff0c;其实是fontsize惹的祸&#xff0c;将父元素的font-size:0px,就可以解决或者父元素设置display: table;