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幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
jQuery Migrate 插件用法实例详解
May 22 jQuery
jquery+php后台实现省市区联动功能示例
May 23 jQuery
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
jQuery中DOM常见操作实例小结
Aug 01 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
jquery实现穿梭框功能
Jan 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 智能404跳转代码,适合换域名没改变目录的网站
2010/06/04 PHP
php学习之变量的使用
2011/05/29 PHP
PHP中__get()和__set()的用法实例详解
2013/06/04 PHP
PHP标准类(stdclass)用法示例
2016/09/28 PHP
php使用高斯算法实现图片的模糊处理功能示例
2016/11/11 PHP
thinkPHP5框架分页样式类完整示例
2018/09/01 PHP
jquery的键盘事件修改代码
2011/02/24 Javascript
javascript数字时钟示例分享
2014/04/23 Javascript
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
jQuery给多个不同元素添加class样式的方法
2015/03/26 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
2016/06/21 Javascript
JavaScript Ajax实现异步通信
2016/12/14 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
2017/01/03 Javascript
Angular4学习笔记之根模块与Ng模块
2017/09/09 Javascript
快速搭建vue2.0+boostrap项目的方法
2018/04/09 Javascript
微信小程序实现禁止分享代码实例
2019/10/19 Javascript
JavaScript中变量提升机制示例详解
2019/12/27 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
2020/07/11 Javascript
跟老齐学Python之编写类之三子类
2014/10/11 Python
使用beaker让Facebook的Bottle框架支持session功能
2015/04/23 Python
使用PDB简单调试Python程序简明指南
2015/04/25 Python
Django 模型类(models.py)的定义详解
2019/07/19 Python
Python嵌套函数,作用域与偏函数用法实例分析
2019/12/26 Python
Python模拟登入的N种方式(建议收藏)
2020/05/31 Python
python 实现有道翻译功能
2021/02/26 Python
详解HTML5中的元素与元素
2015/08/17 HTML / CSS
Furla官网:意大利著名的皮革品牌
2019/08/06 全球购物
Interrail法国:乘火车探索欧洲,最受欢迎的欧洲铁路通票
2019/08/27 全球购物
金融专业个人求职信范文
2013/11/28 职场文书
中文专业学生自我评价范文
2014/02/06 职场文书
爱国主义演讲稿
2014/05/07 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书
2015年国庆节标语大全
2015/07/30 职场文书
护士旷工检讨书
2015/08/15 职场文书
mysql如何配置白名单访问
2021/06/30 MySQL