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中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
JQuery EasyUI的一些常用组件
Jul 12 jQuery
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
JQuery选中select组件被选中的值方法
Mar 08 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
jQuery实现电梯导航模块
Dec 22 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变量赋值、代入给JavaScript中的变量
2015/06/29 PHP
简单了解WordPress开发中update_option()函数的用法
2016/01/11 PHP
利用PHP绘图函数实现简单验证码功能的方法
2016/10/18 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
Javascript实例教程(19) 使用HoTMetal(3)
2006/12/23 Javascript
JQueryEasyUI datagrid框架的基本使用
2013/04/08 Javascript
java与javascript之间json格式数据互转介绍
2013/10/29 Javascript
Js实现动态添加删除Table行示例
2014/04/14 Javascript
JavaScript中的函数重载深入理解
2014/08/04 Javascript
kindeditor修复会替换script内容的问题
2015/04/03 Javascript
原生javascript实现自动更新的时间日期
2016/02/12 Javascript
js表单登陆验证示例
2016/10/19 Javascript
canvas实现图像布局填充功能
2017/02/06 Javascript
node.js入门学习之url模块
2017/02/25 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
2019/11/01 Javascript
js刷新页面location.reload()用法详解
2019/12/09 Javascript
es5 类与es6中class的区别小结
2020/11/09 Javascript
[01:07:47]Secret vs Optic Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
Django自定义插件实现网站登录验证码功能
2017/04/19 Python
详谈python read readline readlines的区别
2017/09/22 Python
解决Pycharm下面出现No R interpreter defined的问题
2018/10/29 Python
python 提取文件指定列的方法示例
2019/08/07 Python
一篇文章搞定Python操作文件与目录
2019/08/13 Python
django实现模板中的字符串文字和自动转义
2020/03/31 Python
Python爬虫入门有哪些基础知识点
2020/06/02 Python
Python读取二进制文件代码方法解析
2020/06/22 Python
乐高积木玩具美国官网:LEGO Shop US
2016/09/16 全球购物
Woods官网:加拿大最古老、最受尊敬的户外品牌之一
2020/09/12 全球购物
shell程序中如何注释
2012/02/17 面试题
计算机专业毕业生求职信
2014/04/30 职场文书
北京奥运会口号
2014/06/21 职场文书
滴水洞导游词
2015/02/10 职场文书
商超业务员岗位职责
2015/02/13 职场文书
质量保证书格式
2015/02/27 职场文书
Pycharm 如何设置HTML文件自动补全代码或标签
2021/05/21 Python