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 相关文章推荐
use jscript with List Proxy Server Information
Jun 11 Javascript
js 获取Listbox选择的值的代码
Apr 15 Javascript
jquery分页插件AmSetPager(自写)
Apr 15 Javascript
解析Node.js基于模块和包的代码部署方式
Feb 16 Javascript
JS 设置Cookie 有效期 检测cookie
Jun 15 Javascript
微信小程序之发送短信倒计时功能
Aug 30 Javascript
Node.js中的child_process模块详解
Jun 08 Javascript
vue观察模式浅析
Sep 25 Javascript
深入理解 Koa 框架中间件原理
Oct 18 Javascript
浅谈js闭包理解
Apr 01 Javascript
JS变量提升原理与用法实例浅析
May 22 Javascript
npm全局环境变量配置详解
Dec 15 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编程最快明白》第六讲:Mysql数据库操作
2010/11/01 PHP
php将时间差转换为字符串提示
2011/09/07 PHP
php的laravel框架快速集成微信登录的方法
2016/12/12 PHP
PHP面向对象多态性实现方法简单示例
2017/09/27 PHP
php框架CodeIgniter主从数据库配置方法分析
2018/05/25 PHP
ThinkPHP5框架实现简单的批量查询功能示例
2018/06/07 PHP
php实现等比例压缩图片
2018/07/26 PHP
扩展String功能方法
2006/09/22 Javascript
动态为事件添加js代码示例
2009/02/15 Javascript
推荐20家国外的脚本下载网站
2011/04/28 Javascript
事件绑定之小测试  onclick && addEventListener
2011/07/31 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
2013/05/30 Javascript
引用外部脚本时script标签关闭的写法
2014/01/20 Javascript
详解JavaScript时间格式化
2015/12/23 Javascript
深入解析JavaScript中函数的Currying柯里化
2016/03/19 Javascript
AngularJS学习第一篇 AngularJS基础知识
2017/02/13 Javascript
VUE前端cookie简单操作
2017/10/17 Javascript
js监听html页面的上下滚动事件方法
2018/09/11 Javascript
Vue实战教程之仿肯德基宅急送App
2019/07/19 Javascript
python基础教程项目五之虚拟茶话会
2018/04/02 Python
Python通过调用有道翻译api实现翻译功能示例
2018/07/19 Python
对python 合并 累加两个dict的实例详解
2019/01/21 Python
OpenCV 边缘检测
2019/07/10 Python
使用TensorFlow对图像进行随机旋转的实现示例
2020/01/20 Python
python 链接sqlserver 写接口实例
2020/03/11 Python
pycharm开发一个简单界面和通用mvc模板(操作方法图解)
2020/05/27 Python
canvas粒子动画背景的实现示例
2018/09/03 HTML / CSS
Calzedonia美国官网:意大利风格袜子、打底裤和沙滩装
2018/07/19 全球购物
教师演讲稿范文
2014/01/08 职场文书
采购意向书范本
2014/03/31 职场文书
加入学生会演讲稿
2014/04/24 职场文书
2015年大学学生会工作总结
2015/05/13 职场文书
先进基层党组织事迹材料2016
2016/02/29 职场文书
创业计划书之健康营养产业
2019/10/15 职场文书
详解MySQL中的pid与socket
2021/06/15 MySQL
GO语言字符串处理函数之处理Strings包
2022/04/14 Golang