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操作xml
Nov 04 Javascript
jquery实现鼠标拖动图片效果示例代码
Jan 09 Javascript
jquery判断元素是否隐藏的多种方法
May 06 Javascript
你知道setTimeout是如何运行的吗?
Aug 16 Javascript
jquery 多个radio的click事件实例
Dec 03 Javascript
jQuery DateTimePicker 日期和时间插件示例
Jan 22 Javascript
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
AngularJS日期格式化常见操作实例分析
May 17 Javascript
Vue组件中prop属性使用说明实例代码详解
May 31 Javascript
JS实现可针对算术表达式求值的计算器功能示例
Sep 04 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
May 10 Javascript
关于vue 结合原生js 解决echarts resize问题
Jul 26 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
PHP实现图片不变型裁剪及图片按比例裁剪的方法
2016/01/14 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
ASP中用Join和Array,可以加快字符连接速度的代码
2007/08/22 Javascript
神奇的代码 通杀各种网站-可随意修改复制页面内容
2008/07/17 Javascript
初学JavaScript第二章
2008/09/30 Javascript
javascript开发技术大全-第3章 js数据类型
2011/07/03 Javascript
javaScript arguments 对象使用介绍
2013/10/18 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
2014/11/16 Javascript
ECMAScript6新增值比较函数Object.is
2015/06/12 Javascript
jQuery实现的经典滑动门效果
2015/09/22 Javascript
jQuery遍历DOM元素与节点方法详解
2016/04/14 Javascript
基于zepto.js实现登录界面
2017/10/09 Javascript
JS实现头条新闻的经典轮播图效果示例
2019/01/30 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
2019/03/08 Javascript
Vue路由对象属性 .meta $route.matched详解
2019/11/04 Javascript
微信小程序图片右边加两行文字的代码
2020/04/23 Javascript
Python对HTML转义字符进行反转义的实现方法
2019/04/28 Python
Django框架模板语言实例小结【变量,标签,过滤器,继承,html转义】
2019/05/23 Python
python time.sleep()是睡眠线程还是进程
2019/07/09 Python
使用Django xadmin 实现修改时间选择器为不可输入状态
2020/03/30 Python
pandas to_excel 添加颜色操作
2020/07/14 Python
python如何对链表操作
2020/10/10 Python
澳大利亚药房在线:ThePharmacy
2017/10/04 全球购物
MAC彩妆英国官网:M·A·C UK
2018/05/30 全球购物
领先的荷兰线上超市:荷兰之家Holland at Home(支持中文)
2021/01/21 全球购物
师范生实习的个人自我鉴定
2013/10/20 职场文书
幼儿园小班评语
2014/04/18 职场文书
《莫泊桑拜师》教学反思
2014/04/23 职场文书
工商管理自荐书
2014/07/06 职场文书
施工安全汇报材料
2014/08/17 职场文书
缓刑人员思想汇报500字
2014/09/12 职场文书
科长个人四风问题整改措施思想汇报
2014/10/13 职场文书
深入开展党的群众路线教育实践活动心得体会
2014/11/05 职场文书
2015年中秋节演讲稿
2015/03/20 职场文书
Redis延迟队列和分布式延迟队列的简答实现
2021/05/13 Redis
CSS基础详解
2021/10/16 HTML / CSS