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插件制作 自增长输入框实现代码
Aug 17 jQuery
js和jquery中获取非行间样式
May 05 jQuery
基于jQuery封装的分页组件
Jun 26 jQuery
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
Jquery获取radio选中值实例总结
Jan 17 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
jQuery事件委托代码实践详解
Jun 21 jQuery
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
JQuery表单元素取值赋值方法总结
May 12 jQuery
如何在vue 中引入使用jquery
Nov 10 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 trim 去除空字符的定义与语法介绍
2010/05/31 PHP
有关php运算符的知识大全
2011/11/03 PHP
php中检查文件或目录是否存在的代码小结
2012/10/22 PHP
详解在PHP的Yii框架中使用行为Behaviors的方法
2016/03/18 PHP
PHP的静态方法与普通方法用法实例分析
2019/09/26 PHP
jquery.ui.draggable中文文档
2009/11/24 Javascript
jQuery 跨域访问问题解决方法
2009/12/02 Javascript
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
2014/10/17 Javascript
jquery事件preventDefault()方法用法实例
2015/01/16 Javascript
javascript实现根据时间段显示问候语的方法
2015/06/18 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
2016/12/01 Javascript
关于javascript事件响应的基础语法总结(必看篇)
2016/12/26 Javascript
Echarts基本用法_动力节点Java学院整理
2017/08/11 Javascript
Angular使用Md5加密的解决方法
2017/09/16 Javascript
vue.js项目中实用的小技巧汇总
2017/11/29 Javascript
详解js创建对象的几种方法及继承
2019/04/12 Javascript
vue导航栏部分的动态渲染实例
2019/11/01 Javascript
vue实现按钮切换图片
2021/01/20 Vue.js
[01:05:00]2018国际邀请赛 表演赛 Pain vs OpenAI
2018/08/24 DOTA
python通过shutil实现快速文件复制的方法
2015/03/14 Python
用Python写飞机大战游戏之pygame入门(4):获取鼠标的位置及运动
2015/11/05 Python
pycharm下打开、执行并调试scrapy爬虫程序的方法
2017/11/29 Python
python实现随机调用一个浏览器打开网页
2018/04/21 Python
Python坐标轴操作及设置代码实例
2020/06/04 Python
python输出结果刷新及进度条的实现操作
2020/07/13 Python
Django限制API访问频率常用方法解析
2020/10/12 Python
25个CSS3动画按钮和菜单教程分享
2012/10/03 HTML / CSS
Nili Lotan官网:Nili Lotan同名品牌
2018/01/07 全球购物
百思买加拿大:Best Buy Canada
2018/03/20 全球购物
shallow copy和deep copy的区别
2016/05/09 面试题
陈欧广告词
2014/03/14 职场文书
2014年企业党建工作总结
2014/12/18 职场文书
2015年机关作风和效能建设工作总结
2015/07/23 职场文书
2019通用版新员工入职培训方案!
2019/07/11 职场文书
html实现弹窗的实例
2021/06/09 HTML / CSS