vue-cli如何引入bootstrap工具的方法


Posted in Javascript onOctober 19, 2017

本文介绍了vue-cli如何引入bootstrap工具的方法,分享给大家,也给自己留个笔记。

以下操作以正常安装node环境为前提。

1.引入jq:

在npm控制台中,进入项目目录,然后输入指令npm install jquery --save-dev(npm换成cnpm更好,国内环境下使用cnpm下载速度更快)。

2.修改build目录下的webpack.base.conf.js配置文件:

  1)加入webpack对象:var webpack=require('webpack');

  2)在module.exports里面加入以下配置:

plugins: [ 

 
new webpack.ProvidePlugin({ 

 


$:"jquery", 




 jQuery:"jquery", 




 "windows.jQuery":"jquery" 



 }) 


]

3)在入口文件main.js中加入:import jquery from 'jquery'

3.引入bootstrap:

  1)修改webpack.base.conf.js文件:

alias: { 


 'vue$': 'vue/dist/vue.esm.js', 



 '@': resolve('src'), 



 'assets': path.resolve(__dirname, '../src/assets'), 



 'jquery': "jquery/src/jquery" 


 }

2)在入口文件main.js中加入:

import './assets/css/bootstrap.min.css' 

import './assets/js/bootstrap.min'

 3)在assets文件目录中拷贝bootstrap各种文件:

vue-cli如何引入bootstrap工具的方法       

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ImageFlow可鼠标控制图片滚动
Jan 30 Javascript
jQuery学习笔记 操作jQuery对象 属性处理
Sep 19 Javascript
file模式访问网页时iframe高度自适应解决方案
Jan 16 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
Sep 03 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
Mar 18 Javascript
js获取当前日期时间及其它日期操作汇总
Mar 08 Javascript
详解vue前后台数据交互vue-resource文档
Jul 19 Javascript
vue实现点击当前标签高亮效果【推荐】
Jun 22 Javascript
解决vue attr取不到属性值的问题
Sep 18 Javascript
vue项目持久化存储数据的实现代码
Oct 01 Javascript
深入了解JavaScript代码覆盖
Jun 13 Javascript
JS三级联动代码格式实例详解
Dec 30 Javascript
JS开发中基本数据类型具体有哪几种
Oct 19 #Javascript
微信小程序支付之c#后台实现方法
Oct 19 #Javascript
JS实现点击链接切换显示隐藏内容的方法
Oct 19 #Javascript
bootstrap日期插件daterangepicker使用详解
Oct 19 #Javascript
微信小程序的生命周期的详解
Oct 19 #Javascript
python爬取安居客二手房网站数据(实例讲解)
Oct 19 #Javascript
js 两个日期比较相差多少天的实例
Oct 19 #Javascript
You might like
收音机史话 - 1960年代前后的DIY
2021/03/02 无线电
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
PHP也能干大事 随机函数
2015/04/14 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
escape编码与unescape解码汉字出现乱码的解决方法
2014/07/02 Javascript
jQuery中offset()方法用法实例
2015/01/16 Javascript
JS中Location使用详解
2015/05/12 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
2016/03/10 Javascript
Bootstrap 模态框(Modal)带参数传值实例
2017/08/20 Javascript
微信小程序解析富文本过程详解
2019/07/13 Javascript
小程序如何获取多个formId实现详解
2019/09/20 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
2019/11/11 Javascript
Angular进行简单单元测试的实现方法实例
2020/08/16 Javascript
Vue切换Tab动态渲染组件的操作
2020/09/21 Javascript
Vue中nprogress页面加载进度条的方法实现
2020/11/13 Javascript
[01:05]DOTA2完美大师赛趣味视频之选手教你打职业
2017/11/23 DOTA
python使用在线API查询IP对应的地理位置信息实例
2014/06/01 Python
python学习之第三方包安装方法(两种方法)
2015/07/30 Python
selenium+python 对输入框的输入处理方法
2018/10/11 Python
python+flask实现API的方法
2018/11/21 Python
Python 等分切分数据及规则命名的实例代码
2019/08/16 Python
python 实现一个反向单位矩阵示例
2019/11/29 Python
详解HTML5中的元素与元素
2015/08/17 HTML / CSS
日本最大的药妆连锁店:Matsukiyo松本清药妆店
2017/11/23 全球购物
极简鞋类,赤脚的感觉:Lems Shoes
2019/08/06 全球购物
资深财务管理人员自我评价
2013/09/22 职场文书
企业家王石演讲稿:坚持与放下
2014/04/27 职场文书
室内设计专业自荐信
2014/05/31 职场文书
保卫钓鱼岛口号
2014/06/20 职场文书
2014乡镇机关党员个人对照检查材料思想汇报
2014/10/09 职场文书
单位员工收入证明样本
2014/10/09 职场文书
在职人员跳槽求职信
2015/03/20 职场文书
2015年小学生国庆节演讲稿
2015/07/30 职场文书
毕业生自我鉴定范文
2019/05/13 职场文书
redis配置文件中常用配置详解
2021/04/14 Redis
RestTemplate如何通过HTTP Basic Auth认证示例说明
2022/03/17 Java/Android