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 相关文章推荐
JavaScript 撑出页面文字换行
Jun 15 Javascript
Javascript 二维数组
Nov 26 Javascript
jquery动态增加删除表格行的小例子
Nov 14 Javascript
jquery比较简洁的软键盘特效实现方法
Mar 19 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
Dec 17 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
Jul 05 Javascript
json与jsonp知识小结(推荐)
Aug 16 Javascript
AngularJS中transclude用法详解
Nov 03 Javascript
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
基于Vue实现微信小程序的图文编辑器
Jul 25 Javascript
Vue实现仿iPhone悬浮球的示例代码
Mar 13 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
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
用PHP和ACCESS写聊天室(十)
2006/10/09 PHP
php学习笔记 数组遍历实现代码
2011/06/09 PHP
测试php函数的方法
2013/11/13 PHP
5种PHP创建数组的实例代码分享
2014/01/17 PHP
PHP常用编译参数中文说明
2014/09/27 PHP
PHP判断字符串长度的两种方法很实用
2015/09/22 PHP
一次因composer错误使用引发的问题与解决
2019/03/06 PHP
php curl发送请求实例方法
2019/08/01 PHP
JavaScript与DropDownList 区别分析
2010/01/01 Javascript
Extjs学习笔记之四 工具栏和菜单
2010/01/07 Javascript
JSON 和 JavaScript eval使用说明
2010/06/13 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
2012/10/11 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
jQuery实现统计输入文字个数的方法
2015/03/11 Javascript
举例说明JavaScript中的实例对象与原型对象
2016/03/11 Javascript
vue.js利用defineProperty实现数据的双向绑定
2017/04/28 Javascript
简单谈谈关于 npm 5.0 的新坑
2017/06/08 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
2017/12/15 Javascript
async/await优雅的错误处理方法总结
2019/01/30 Javascript
vue实现局部刷新的实现示例
2019/04/16 Javascript
Vue实现剪切板图片压缩功能
2020/02/04 Javascript
vue界面发送表情的实现代码
2020/09/11 Javascript
Vue中使用JsonView来展示Json树的实例代码
2020/11/16 Javascript
Tornado高并发处理方法实例代码
2018/01/15 Python
关于Python形参打包与解包小技巧分享
2019/08/24 Python
python求绝对值的三种方法小结
2019/12/04 Python
Python中的整除和取模实例
2020/06/03 Python
在HTML5 canvas里用卷积核进行图像处理的方法
2018/05/02 HTML / CSS
StubHub哥伦比亚:购买和出售您的门票
2016/10/20 全球购物
我有一个char * 型指针正巧指向一些int 型变量, 我想跳过它们。 为什么如下的代码((int *)p)++; 不行?
2013/05/09 面试题
劳动之星获奖感言
2014/02/01 职场文书
老人再婚离婚协议书范本
2014/10/27 职场文书
奔腾年代观后感
2015/06/09 职场文书
《认识钟表》教学反思
2016/02/16 职场文书
2016年学校爱国卫生月活动总结
2016/04/06 职场文书
python单向链表实例详解
2022/05/25 Python