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轻松实现无缝轮播效果
Mar 22 jQuery
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
jQuery validata插件实现方法
Jun 25 jQuery
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
菊花转动的jquery加载动画效果
Aug 19 jQuery
详解jQuery如何实现模糊搜索
May 10 jQuery
jQuery Ajax async=>false异步改为同步时,解决导致浏览器假死的问题
Jul 22 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实现的功能是显示8条基色色带
2006/10/09 PHP
以文本方式上传二进制文件的PHP程序
2006/10/09 PHP
15种PHP Encoder的比较
2007/04/17 PHP
php 操作符与控制结构
2012/03/07 PHP
PHP学习笔记 IIS7下安装配置php环境
2012/10/29 PHP
php Session存储到Redis的方法
2013/11/04 PHP
JavaScript 异步调用框架 (Part 1 - 问题 & 场景)
2009/08/03 Javascript
JavaScript 学习初步 入门教程
2010/03/25 Javascript
Array的push与unshift方法性能比较分析
2011/03/05 Javascript
关于JavaScript中的关联数组分析
2013/04/09 Javascript
jquery动态更换设置背景图的方法
2014/03/25 Javascript
jQuery中closest()函数用法实例
2015/01/07 Javascript
JavaScript删除指定子元素代码实例
2015/01/13 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
2015/02/28 Javascript
javascript实现行拖动的方法
2015/05/27 Javascript
基于JS2Image实现圣诞树代码
2015/12/24 Javascript
jQuery Validate插件ajax方式验证输入值的实例
2017/12/21 jQuery
vue 源码解析之虚拟Dom-render
2019/08/26 Javascript
layui 表单标签的校验方法
2019/09/04 Javascript
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
python中os和sys模块的区别与常用方法总结
2017/11/14 Python
python datetime中strptime用法详解
2019/08/29 Python
Pytorch 多维数组运算过程的索引处理方式
2019/12/27 Python
Tensorflow全局设置可见GPU编号操作
2020/06/30 Python
Pycharm配置lua编译环境过程图解
2020/11/28 Python
html5 外链式实现加减乘除的代码
2019/09/04 HTML / CSS
汽车维修专业毕业生的求职信分享
2013/12/04 职场文书
模特职业生涯规划范文
2014/02/26 职场文书
贷款委托书范本
2014/04/08 职场文书
班级文化建设标语
2014/06/23 职场文书
小学班主任事迹材料
2014/12/17 职场文书
2015年班组建设工作总结
2015/05/13 职场文书
春晚观后感
2015/06/11 职场文书
信息技术教研组工作总结
2015/08/13 职场文书
Go 语言结构实例分析
2021/07/04 Golang
利用 JavaScript 构建命令行应用
2021/11/17 Javascript