vue中如何引入jQuery和Bootstrap


Posted in jQuery onApril 10, 2017

这两天学习了Vue.js ,所以,今天添加一点小笔记。

一、引入jQuery

在当前项目的目录下(就是package.json),运行命令 cnpm install jquery --save-dev  这样就将jquery安装到了这个项目中。

然后修改webpack.base.conf.js(在build文件下)两个地方:

1:加入

var webpack=require('webpack');

2 在module.exports的里面加入

plugins: [
 new webpack.optimize.CommonsChunkPlugin('common.js'),
 new webpack.ProvidePlugin({
   jQuery: "jquery",
   $: "jquery"
 })
]

最后在main.js中加入import $ form 'jquery',完成jquery的引入

二、引入 bootstrap.css文件:

修改webpack.base.conf.js

resolve: {
extensions: ['.js', '.vue', '.json'],

alias: {

'vue$': 'vue/dist/vue.esm.js',

'@': resolve('src'),

'bootstrap':resolve('src/assets/bootstrap'),

}
},

在main.js中import引入

import 'bootstrap/js/bootstrap.min.js'
import 'bootstrap/css/bootstrap.min.css'

三、引入bootstrap.min.js文件:

在main.js中import引入

import 'bootstrap/js/bootstrap.min.js'

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery遮罩层实例讲解
May 11 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
jQuery复合事件用法示例
Jun 10 jQuery
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
jQuery表单选择器用法详解
Aug 22 jQuery
jquery实现聊天机器人
Feb 08 jQuery
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 #jQuery
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 #jQuery
jQuery EasyUI之验证框validatebox实例详解
Apr 10 #jQuery
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 #jQuery
利用jQuery解析获取JSON数据
Apr 08 #jQuery
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 #jQuery
jQuery中map函数的两种方式
Apr 07 #jQuery
You might like
PHP 和 COM
2006/10/09 PHP
提高PHP编程效率的方法
2013/11/07 PHP
PHP基于php_imagick_st-Q8.dll实现JPG合成GIF图片的方法
2014/07/11 PHP
php通过PHPExcel导入Excel表格到MySQL数据库的简单实例
2016/10/29 PHP
php文件上传及下载附带显示文件及目录功能
2017/04/27 PHP
php设计模式之装饰模式应用案例详解
2019/06/17 PHP
js substring从右边获取指定长度字符串(示例代码)
2013/12/23 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
2014/09/01 Javascript
js打造数组转json函数
2015/01/14 Javascript
jQuery实现美观的多级动画效果菜单代码
2015/09/06 Javascript
JavaScript中的定时器之Item23的合理使用
2015/10/30 Javascript
DeviceOne 让你一见钟情的App快速开发平台
2016/02/17 Javascript
Bootstrap的modal拖动效果
2016/12/25 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
2018/01/16 Javascript
element-ui中的select下拉列表设置默认值方法
2018/08/24 Javascript
vue与bootstrap实现简单用户信息添加删除功能
2019/02/15 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
2019/06/24 Javascript
详解Vue2的diff算法
2021/01/06 Vue.js
Python编码爬坑指南(必看)
2016/06/10 Python
使用Python多线程爬虫爬取电影天堂资源
2016/09/23 Python
关于Python中空格字符串处理的技巧总结
2017/08/10 Python
基于python中pygame模块的Linux下安装过程(详解)
2017/11/09 Python
Python 装饰器实现DRY(不重复代码)原则
2018/03/05 Python
Python开发虚拟环境使用virtualenvwrapper的搭建步骤教程图解
2018/09/19 Python
在python中bool函数的取值方法
2018/11/01 Python
Python使用gluon/mxnet模块实现的mnist手写数字识别功能完整示例
2019/12/18 Python
终于搞懂了Keras中multiloss的对应关系介绍
2020/06/22 Python
Python3爬虫中关于Ajax分析方法的总结
2020/07/10 Python
15款Python编辑器的优缺点,别再问我“选什么编辑器”啦
2020/10/19 Python
英国最大的高品质珠宝和手表专家:Goldsmiths
2017/03/11 全球购物
印尼太阳百货公司网站:Matahari
2018/02/04 全球购物
高中班长自我鉴定
2013/12/20 职场文书
先进事迹演讲稿
2014/09/01 职场文书
地理科学专业自荐信
2014/09/01 职场文书
大学生个人简历自我评价
2015/03/11 职场文书
中学生运动会广播稿
2015/08/19 职场文书