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解析获取JSON数据
Apr 08 jQuery
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
jquery自定义显示消息数量
Dec 19 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
jQuery操作事件完整实例分析
Jan 10 jQuery
jQuery 移除事件的方法
Jun 20 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/03/15 PHP
php 中文处理函数集合
2008/08/27 PHP
PHP不用递归实现无限分级的例子分享
2014/04/18 PHP
PHP连接MySQL数据库的三种方式实例分析【mysql、mysqli、pdo】
2019/11/04 PHP
破解Session cookie的方法
2006/07/28 Javascript
JavaScript作用域与作用域链深入解析
2013/12/06 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
jQuery实现表格颜色交替显示的方法
2015/03/09 Javascript
浅谈javascript事件取消和阻止冒泡
2015/05/26 Javascript
jQuery Mobile操作HTML5的常用函数总结
2016/05/17 Javascript
解决wx.onMenuShareTimeline出现的问题
2016/08/16 Javascript
js选项卡的制作方法
2017/01/23 Javascript
jQuery实现标签页效果实战(4)
2017/02/08 Javascript
JS实现最简单的冒泡排序算法
2017/02/15 Javascript
json的结构与遍历方法实例分析
2017/04/25 Javascript
解决option标签selected="selected"属性失效的问题
2017/11/06 Javascript
javascript实现数字配对游戏的实例讲解
2017/12/14 Javascript
解析Vue.js中的组件
2018/02/02 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
2018/04/12 jQuery
[01:25]DOTA2超级联赛专访iG 将调整状态找回自己
2013/06/05 DOTA
[58:54]EG vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python语言实现获取主机名根据端口杀死进程
2016/03/31 Python
python生成词云的实现方法(推荐)
2017/06/13 Python
详解django中使用定时任务的方法
2018/09/27 Python
Python实现投影法分割图像示例(二)
2020/01/17 Python
详解python UDP 编程
2020/08/24 Python
台湾流行服饰购物平台:OB严选
2018/01/21 全球购物
施工材料员岗位职责
2014/02/12 职场文书
房产委托公证书
2014/04/08 职场文书
2014年五四青年节演讲稿范文
2014/04/22 职场文书
公共场所禁烟倡议书
2014/08/30 职场文书
国家助学金感谢信
2015/01/21 职场文书
赢在中国观后感
2015/06/02 职场文书
教育读书笔记
2015/07/02 职场文书
2016年寒假家长评语
2015/10/10 职场文书
一次SQL查询优化原理分析(900W+数据从17s到300ms)
2022/06/10 SQL Server