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+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
JQuery EasyUI的一些常用组件
Jul 12 jQuery
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
React中jquery引用的实现方法
Sep 12 jQuery
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
jQuery实现可编辑的表格
Dec 11 jQuery
jquery插件实现悬浮的菜单
Apr 24 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
用C/C++扩展你的PHP 为你的php增加功能
2012/09/06 PHP
php class中public,private,protected的区别以及实例分析
2013/06/18 PHP
php实现将任意进制数转换成10进制的方法
2015/04/17 PHP
百度工程师讲PHP函数的实现原理及性能分析(二)
2015/05/13 PHP
使用PHPCMS搭建wap手机网站
2015/09/20 PHP
PHP中strcmp()和strcasecmp()函数字符串比较用法分析
2016/01/07 PHP
详解js异步文件加载器
2016/01/24 PHP
js禁止页面使用右键(简单示例代码)
2013/11/13 Javascript
js判断出两个字符串最大子串的函数实现方法
2016/11/01 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
原生JS实现不断变化的标签
2017/05/22 Javascript
JS实现简单抖动效果
2017/06/01 Javascript
详解关于vue-area-linkage走过的坑
2018/06/27 Javascript
JS写滑稽笑脸运动效果
2020/05/28 Javascript
Python编程之属性和方法实例详解
2015/05/19 Python
Python连接phoenix的方法示例
2017/09/29 Python
Pipenv一键搭建python虚拟环境的方法
2018/05/22 Python
把pandas转换int型为str型的方法
2019/01/29 Python
python中web框架的自定义创建
2019/09/08 Python
浅谈Django QuerySet对象(模型.objects)的常用方法
2020/03/28 Python
python实现磁盘日志清理的示例
2020/11/05 Python
浅谈CSS3中的变形功能-transform功能
2017/12/27 HTML / CSS
五分钟学会HTML5的WebSocket协议
2019/11/22 HTML / CSS
公司企业表扬信
2014/01/11 职场文书
《孙权劝学》教学反思
2014/04/23 职场文书
诚信承诺书模板
2014/05/26 职场文书
小学运动会口号
2014/06/07 职场文书
教师正风肃纪剖析材料
2014/10/20 职场文书
2014大学辅导员工作总结
2014/12/02 职场文书
劳资员岗位职责
2015/02/13 职场文书
党校毕业个人总结
2015/02/28 职场文书
2015年班主任个人工作总结
2015/03/31 职场文书
2015年第31个教师节致辞
2015/07/31 职场文书
php 防护xss,PHP的防御XSS注入的终极解决方案
2021/04/01 PHP
Nginx源码编译安装过程记录
2021/11/17 Servers
Win10本地连接不见了怎么恢复? win10系统电脑本地连接不见了解决方法
2023/01/09 数码科技