vue-cli 引入jQuery,Bootstrap,popper的方法


Posted in jQuery onSeptember 03, 2018

1.安装插件

npm install jquery --save     //jquery插件
npm install bootstrap --save    //bootstrap
npm install --save popper.js   //popper.js

2.修改build目录下的webpack.base.conf.js配置文件:

1)加入webpack对象:var webpack=require('webpack');

2)在module.exports里面加入以下配置: 

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

webpack.base.conf.js配置文件最终代码

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
const webpack = require('webpack')

function resolve (dir) {
 return path.join(__dirname, '..', dir)
}

 

module.exports = {
 context: path.resolve(__dirname, '../'),
 entry: {
  app: './src/main.js'
 },
 output: {
  path: config.build.assetsRoot,
  filename: '[name].js',
  publicPath: process.env.NODE_ENV === 'production'
   ? config.build.assetsPublicPath
   : config.dev.assetsPublicPath
 },
 resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
   'vue$': 'vue/dist/vue.esm.js',
   '@': resolve('src'),
  }
 },
 module: {
  rules: [
   {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: vueLoaderConfig
   },
   {
    test: /\.js$/,
    loader: 'babel-loader',
    include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
   },
   {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
     limit: 10000,
     name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
   },
   {
    test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
    loader: 'url-loader',
    options: {
     limit: 10000,
     name: utils.assetsPath('media/[name].[hash:7].[ext]')
    }
   },
   {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: {
     limit: 10000,
     name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    }
   }
  ]
 },
 node: {
  // prevent webpack from injecting useless setImmediate polyfill because Vue
  // source contains it (although only uses it if it's native).
  setImmediate: false,
  // prevent webpack from injecting mocks to Node native modules
  // that does not make sense for the client
  dgram: 'empty',
  fs: 'empty',
  net: 'empty',
  tls: 'empty',
  child_process: 'empty'
 },
 plugins: [
  new webpack.optimize.CommonsChunkPlugin('common'),
  new webpack.ProvidePlugin({
   $: 'jquery',
   jQuery: 'jquery',
   Popper: ['popper.js', 'default']
  })
 ]
}

3.在main.js中把jQuery,bootstrap的js和css通过import引进来

代码如下:

import $ from 'jquery'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'

最后重新启动一下:

npm run dev

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

jQuery 相关文章推荐
关于jQuery库冲突的完美解决办法
May 20 jQuery
简单实现jQuery手风琴效果
Aug 18 jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
jQuery中的for循环var与let的区别
Apr 21 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
浅谈JS和jQuery的区别
Mar 27 jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
jquery插件实现搜索历史
Apr 24 jQuery
详解jQuery中的easyui
Sep 02 #jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 #jQuery
jQuery解析json格式数据示例
Sep 01 #jQuery
jQuery实现表格隔行换色
Sep 01 #jQuery
基于jQuery ztree实现表格风格的树状结构
Aug 31 #jQuery
解决jQuery使用append添加的元素事件无效的问题
Aug 30 #jQuery
jQuery实现的简单手风琴效果示例
Aug 29 #jQuery
You might like
4.与数据库的连接
2006/10/09 PHP
一周学会PHP(视频)Http下载
2006/12/12 PHP
php 模拟POST|GET操作实现代码
2010/07/20 PHP
PHP项目开发中最常用的自定义函数整理
2010/12/02 PHP
php 计算两个时间相差的天数、小时数、分钟数、秒数详解及实例代码
2016/11/09 PHP
PHP 观察者模式深入理解与应用分析
2019/09/25 PHP
IE浏览器PNG图片透明效果代码
2008/09/02 Javascript
JavaScript入门教程(5) js Screen屏幕对象
2009/01/31 Javascript
AJAX 网页保留浏览器前进后退等功能
2011/02/12 Javascript
jQuery右下角悬浮广告实例
2016/10/17 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
2017/05/11 Javascript
js取小数点后两位四种方法
2019/01/18 Javascript
详细介绍Python函数中的默认参数
2015/03/30 Python
Python脚本文件打包成可执行文件的方法
2015/06/02 Python
Python读取视频的两种方法(imageio和cv2)
2018/04/15 Python
Python使用pymysql从MySQL数据库中读出数据的方法
2018/07/25 Python
python爬取百度贴吧前1000页内容(requests库面向对象思想实现)
2019/08/10 Python
softmax及python实现过程解析
2019/09/30 Python
Python3.7下安装pyqt5的方法步骤(图文)
2020/05/12 Python
如何将anaconda安装配置的mmdetection环境离线拷贝到另一台电脑
2020/10/15 Python
UI自动化定位常用实现方法代码示例
2020/10/27 Python
python 基于opencv 绘制图像轮廓
2020/12/11 Python
HTML5 placeholder属性详解
2016/06/22 HTML / CSS
苹果Mac升级:MacSales.com
2017/11/20 全球购物
优衣库美国官网:UNIQLO美国
2018/04/14 全球购物
生物化学研究助理员求职信
2013/10/09 职场文书
通用求职信范文模板分享
2013/12/27 职场文书
《玩具柜台前的孩子》教学反思
2014/02/13 职场文书
计算机系统管理员求职信
2014/06/20 职场文书
民事授权委托书范文
2014/08/02 职场文书
中秋节国旗下演讲稿
2014/09/13 职场文书
防灾减灾标语
2014/10/07 职场文书
网络营销实训总结
2015/08/03 职场文书
南阳市白酒市场的调查报告
2019/11/08 职场文书
星际争霸:毕姥爷vs解冻03
2022/04/01 星际争霸
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS