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 获取当前时间戳的代码
Aug 05 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Sep 26 Javascript
Highcharts使用简例及异步动态读取数据
Dec 30 Javascript
JQuery ztree带筛选、异步加载实例讲解
Feb 25 Javascript
浅析BootStrap模态框的使用(经典)
Apr 29 Javascript
React组件之间的通信的实例代码
Jun 27 Javascript
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
React Native悬浮按钮组件的示例代码
Apr 05 Javascript
JavaScript常用事件介绍
Jan 21 Javascript
基于Node.js的大文件分片上传示例
Jun 19 Javascript
angularjs请求数据的方法示例
Aug 06 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
Aug 24 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网上调查系统
2006/10/09 PHP
从手册去理解分析PHP session机制
2011/07/17 PHP
php数组函数序列 之shuffle()和array_rand() 随机函数使用介绍
2011/10/29 PHP
PHP APC的安装与使用详解
2013/06/13 PHP
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
轻松创建nodejs服务器(9):实现非阻塞操作
2014/12/18 NodeJs
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
2015/05/11 Javascript
分享十五款 jQuery 社交网络分享插件
2015/05/16 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
2016/07/05 Javascript
JS+CSS3实现超炫的散列画廊特效
2016/07/16 Javascript
JavaScript中的splice方法用法详解
2016/07/20 Javascript
深入理解jQuery layui分页控件的使用
2016/08/17 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
2016/11/05 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
2017/06/12 Javascript
详解小程序BackgroundAudioManager踩坑之旅
2019/12/08 Javascript
Python开发常用的一些开源Package分享
2015/02/14 Python
python中for语句简单遍历数据的方法
2015/05/07 Python
使用Python的Tornado框架实现一个Web端图书展示页面
2016/07/11 Python
Python使用分布式锁的代码演示示例
2018/07/30 Python
基于python指定包的安装路径方法
2018/10/27 Python
在django中自定义字段Field详解
2019/12/03 Python
什么是Python包的循环导入
2020/09/08 Python
python如何获得list或numpy数组中最大元素对应的索引
2020/11/16 Python
利用SVG和CSS3来实现一个炫酷的边框动画
2015/07/22 HTML / CSS
简洁自适应404页面HTML好看的404源码
2020/12/16 HTML / CSS
公关关系专员的自我评价分享
2013/11/20 职场文书
连锁酒店店长职责范本
2014/02/13 职场文书
求职意向书范文
2014/04/01 职场文书
党的群众路线教育实践活动组织生活会发言材料
2014/10/17 职场文书
2014年计划生育工作总结
2014/11/14 职场文书
初中生毕业评语
2014/12/29 职场文书
长城英文导游词
2015/01/30 职场文书
幼儿园语言教学反思
2016/02/23 职场文书
利用 SQL Server 过滤索引提高查询语句的性能分析
2021/07/15 SQL Server
JS封装cavans多种滤镜组件
2022/02/15 Javascript
python可视化分析绘制带趋势线的散点图和边缘直方图
2022/06/25 Python