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 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
jQuery中each方法的使用详解
Mar 18 jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
jQuery实现简单弹幕效果
Nov 28 jQuery
jquery传参及获取方式(两种方式)
Feb 13 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
文件上传程序的全部源码
2006/10/09 PHP
dedecms后台验证码总提示错误的解决方法
2007/03/21 PHP
mysql From_unixtime及UNIX_TIMESTAMP及DATE_FORMAT日期函数
2010/03/21 PHP
推荐几个开源的微信开发项目
2014/12/28 PHP
php中静态类与静态变量用法的区别分析
2015/01/15 PHP
php mysql获取表字段名称和字段信息的三种方法
2016/11/13 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
免费空间广告万能消除代码
2006/09/04 Javascript
学习YUI.Ext 第二天
2007/03/10 Javascript
jquery中获得$.ajax()事件返回的值并添加事件的方法
2010/04/15 Javascript
使用Json比用string返回数据更友好,也更面向对象一些
2011/09/13 Javascript
有关JavaScript中call()和apply() 的一些理解
2016/05/20 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
2017/03/23 jQuery
JS的Ajax与后端交互数据的实例
2018/08/08 Javascript
微信小程序制作表格的方法
2019/02/14 Javascript
iview的table组件自带的过滤器实现
2019/07/12 Javascript
使用Node.js在深度学习中做图片预处理的方法
2019/09/18 Javascript
python实现文本文件合并
2015/12/29 Python
Python采用Django制作简易的知乎日报API
2016/08/03 Python
Python序列操作之进阶篇
2016/12/08 Python
python 设置文件编码格式的实现方法
2017/12/21 Python
python中数据爬虫requests库使用方法详解
2018/02/11 Python
详解如何用django实现redirect的几种方法总结
2018/11/22 Python
Python3模拟curl发送post请求操作示例
2019/05/03 Python
python数据类型之间怎么转换技巧分享
2019/08/20 Python
python定义类self用法实例解析
2020/01/22 Python
科沃斯机器人官网商城:Ecovacs
2016/08/29 全球购物
Arti-shopping中文官网:大型海外商品一站式直邮平台
2020/03/23 全球购物
adidas泰国官网:adidas TH
2020/07/11 全球购物
PHP如何设置和取得Cookie值
2015/06/30 面试题
sort命令的作用和用法
2013/08/25 面试题
工程造价与财务管理专业应届生求职信
2013/10/06 职场文书
中文系学生自荐信范文
2013/11/13 职场文书
无犯罪记录证明范本
2014/09/15 职场文书
机关干部个人对照检查材料思想汇报
2014/09/28 职场文书
2015年工程部工作总结
2015/04/30 职场文书