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-data的三种用法
Apr 18 jQuery
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
Jquery获取radio选中的值
May 05 jQuery
jQuery实现div跟随鼠标移动
Aug 20 jQuery
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
jquery实现搜索框功能实例详解
Jul 23 jQuery
jQuery创建折叠式菜单
Jun 15 jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
jQuery实现图片切换效果
Oct 19 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
php时间不正确的解决方法
2008/04/09 PHP
使用Discuz关键词服务器实现PHP中文分词
2014/03/11 PHP
php修改上传图片尺寸的方法
2015/04/14 PHP
php获取flash尺寸详细数据的方法
2016/11/12 PHP
PHP用户注册邮件激活账户的实现代码
2017/05/31 PHP
JavaScript使用prototype定义对象类型(转)[
2006/12/22 Javascript
js 数值项目的格式化函数代码
2010/05/14 Javascript
JavaScript定时器详解及实例
2013/08/01 Javascript
jquery ready函数、css函数及text()使用示例
2013/09/27 Javascript
简介AngularJS的视图功能应用
2015/06/17 Javascript
判断数组是否包含某个元素的js函数实现方法
2016/05/19 Javascript
canvas实现绘制吃豆鱼效果
2017/01/12 Javascript
JS Select下拉框(支持输入模糊查询)
2017/02/04 Javascript
javaScript中封装的各种写法示例(推荐)
2017/07/03 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
2018/12/24 Javascript
js getBoundingClientRect使用方法详解
2019/07/17 Javascript
javascript实现点击小图显示大图
2020/11/29 Javascript
Python中使用SAX解析xml实例
2014/11/21 Python
浅析Python中的join()方法的使用
2015/05/19 Python
Python实现的破解字符串找茬游戏算法示例
2017/09/25 Python
Python里字典的基本用法(包括嵌套字典)
2019/02/27 Python
python查看文件大小和文件夹内容的方法
2019/07/08 Python
python中bytes和str类型的区别
2019/10/21 Python
Python 日期与时间转换的方法
2020/08/01 Python
python小技巧——将变量保存在本地及读取
2020/11/13 Python
一款CSS3实现多功能下拉菜单(带分享按)的教程
2014/11/05 HTML / CSS
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
微信小程序canvas实现水平、垂直居中效果
2020/02/05 HTML / CSS
The Hut英国:英国领先的豪华在线百货商店
2019/07/26 全球购物
Kiwi.com中国:找到特价机票并发现新目的地
2019/10/27 全球购物
12月红领巾广播稿
2014/02/13 职场文书
《青海高原一株柳》教学反思
2014/04/25 职场文书
中学后勤工作总结2015
2015/07/22 职场文书
电力企业职工培训心得体会
2016/01/11 职场文书
85句关于理想的名言警句大全
2019/08/22 职场文书
Python可视化动图组件ipyvizzu绘制惊艳的可视化动图
2022/04/21 Python