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 相关文章推荐
用js实现层随着内容大小动态渐变改变 推荐
Dec 19 Javascript
jquery星级插件、支持页面中多次使用
Mar 25 Javascript
jquery选择器大全 全面详解jquery选择器
Mar 06 Javascript
原生javascript实现匀速运动动画效果
Feb 26 Javascript
jQuery中的each()详细介绍(推荐)
May 25 Javascript
深入理解angular2启动项目步骤
Jul 15 Javascript
js生成word中图片处理方法
Jan 06 Javascript
js中Object.defineProperty()方法的不详解
Jul 09 Javascript
如何在 JavaScript 中更好地利用数组
Sep 27 Javascript
Vuex,iView UI面包屑导航使用扩展详解
Nov 04 Javascript
实现vuex与组件data之间的数据同步更新方式
Nov 12 Javascript
vue实现公共方法抽离
Jul 31 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
Terran魔法科技
2020/03/14 星际争霸
php preg_match_all结合str_replace替换内容中所有img
2008/10/11 PHP
php记录日志的实现代码
2011/08/08 PHP
PHP连接和操作MySQL数据库基础教程
2014/09/29 PHP
简单介绍PHP非阻塞模式
2016/03/03 PHP
PHP创建文件及写入数据(覆盖写入,追加写入)的方法详解
2019/02/15 PHP
常用的javascript function代码
2008/05/23 Javascript
javascript jscroll模拟html元素滚动条
2012/12/18 Javascript
String.prototype实现的一些javascript函数介绍
2013/11/22 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
2014/07/30 Javascript
Nodejs实现的一个静态服务器实例
2014/12/06 NodeJs
jQuery中Ajax的get、post等方法详解
2015/01/20 Javascript
使用jquery获取url及url参数的简单实例
2016/06/14 Javascript
利用JQuery阻止事件冒泡
2016/12/01 Javascript
简单实现JS上传图片预览功能
2017/04/14 Javascript
jquery实现提示语淡入效果
2017/05/05 jQuery
jQuery Validate表单验证插件实现代码
2017/06/08 jQuery
Vue 中批量下载文件并打包的示例代码
2017/11/20 Javascript
Express本地测试HTTPS的示例代码
2018/06/06 Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
2018/08/12 Javascript
[09:22]2014DOTA2西雅图国际邀请赛 主赛事第二日TOPPLAY
2014/07/21 DOTA
Python导入oracle数据的方法
2015/07/10 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
浅谈pandas.cut与pandas.qcut的使用方法及区别
2020/03/03 Python
一款纯css3制作的2015年元旦雪人动画特效教程
2014/12/29 HTML / CSS
巧用HTML5给按钮背景设计不同的动画简单实例
2016/08/09 HTML / CSS
canvas 实现 github404动态效果的示例代码
2017/11/15 HTML / CSS
汽车电子与维修专业大学生求职信
2013/09/28 职场文书
法制宣传标语
2014/06/23 职场文书
后勤管理员岗位职责
2014/08/27 职场文书
本科毕业论文指导教师评语
2014/12/30 职场文书
经典导游欢迎词
2015/01/26 职场文书
2015年学校团委工作总结
2015/05/26 职场文书
出生证明范本
2015/06/15 职场文书
Java spring单点登录系统
2021/09/04 Java/Android
JS开发前端团队展示控制器来为成员引流
2022/08/14 Javascript