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 相关文章推荐
Mootools 1.2教程 输入过滤第一部分(数字)
Sep 15 Javascript
thinkphp中常用的系统常量和系统变量
Mar 05 Javascript
jQuery 获取兄弟元素的几种不错方法
May 23 Javascript
jQuery增加自定义函数的方法
Jul 18 Javascript
JavaScript获取浏览器信息的方法
Nov 20 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
Oct 11 Javascript
ES6入门教程之Iterator与for...of循环详解
May 17 Javascript
angularjs $http实现form表单提交示例
Jun 09 Javascript
Textarea输入字数限制实例(兼容iOS&安卓)
Jul 06 Javascript
CentOS环境中MySQL修改root密码方法
Jan 07 Javascript
分享Angular http interceptors 拦截器使用(推荐)
Nov 10 Javascript
jQuery实现可以扩展的日历
Dec 01 jQuery
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实现把数字ID转字母ID
2013/08/12 PHP
php获取apk包信息的方法
2014/08/15 PHP
php创建session的方法实例详解
2015/01/27 PHP
PHP中iconv函数知识汇总
2015/07/02 PHP
PHP使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
js动态添加onload、onresize、onscroll事件(另类方法)
2012/12/26 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
2013/12/26 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
2017/01/19 Javascript
AngularJs定时器$interval 和 $timeout详解
2017/05/25 Javascript
JS代码实现电脑配置检测功能
2018/03/21 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
2018/05/23 Javascript
webpack多入口多出口的实现方法
2018/08/17 Javascript
vue实现键盘输入支付密码功能
2018/08/18 Javascript
Angular2中监听数据更新的方法
2018/08/31 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
2018/09/25 Javascript
koa大型web项目中使用路由装饰器的方法示例
2019/04/02 Javascript
vue路由守卫,限制前端页面访问权限的例子
2019/11/11 Javascript
python中Flask框架简单入门实例
2015/03/21 Python
python数字图像处理之骨架提取与分水岭算法
2018/04/27 Python
python判断数字是否是超级素数幂
2018/09/27 Python
python redis 删除key脚本的实例
2019/02/19 Python
pytorch 固定部分参数训练的方法
2019/08/17 Python
python selenium循环登陆网站的实现
2019/11/04 Python
CSS超出文本指定宽度用省略号代替和文本不换行
2016/05/05 HTML / CSS
美国眼镜网:GlassesUSA
2017/09/07 全球购物
开办饭店创业计划书
2013/12/28 职场文书
个人培训自我鉴定
2014/03/28 职场文书
以权谋私检举信范文
2015/03/02 职场文书
整改通知书
2015/04/20 职场文书
获奖感言怎么写
2015/07/31 职场文书
2016年毕业实习心得体会范文
2015/10/09 职场文书
pycharm2021激活码使用教程(永久激活亲测可用)
2021/03/30 Python
uniapp开发小程序的经验总结
2021/04/08 Javascript
Mongo服务重启异常问题的处理方法
2021/07/01 MongoDB
日本十大血腥动漫,那些被禁播的动漫盘点
2022/03/21 日漫