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.form.js异步提交表单详解
Apr 25 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
jquery实现简单自动轮播图效果
Jul 29 jQuery
jQuery实现动态加载瀑布流
Sep 01 jQuery
JQuery使用数组遍历跳出each循环
Sep 01 jQuery
jQuery实现广告显示和隐藏动画
Jul 04 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开发者的10个技巧
2011/02/25 PHP
浅析php中如何在有限的内存中读取大文件
2013/07/02 PHP
php无限遍历目录示例
2014/02/21 PHP
php正则表达式基本知识与应用详解【经典教程】
2017/04/17 PHP
Mootools 1.2教程(3) 数组使用简介
2009/09/14 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
2012/03/14 Javascript
如何使用json在前后台进行数据传输实例介绍
2013/04/11 Javascript
js中document.write使用过程中的一点疑问解答
2014/03/20 Javascript
JavaScript数组去重的两种方法推荐
2016/04/05 Javascript
轻松掌握JavaScript代理模式
2016/08/26 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
2016/09/05 Javascript
浅谈Node.js 子进程与应用场景
2018/01/24 Javascript
AngularJS创建一个上传照片的指令实例代码
2018/02/24 Javascript
vue后台管理之动态加载路由的方法
2018/08/13 Javascript
React Hooks的深入理解与使用
2018/11/12 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
2019/03/26 Javascript
jquery实现下载图片功能
2019/07/18 jQuery
JS实现iframe中子父页面跨域通讯的方法分析
2020/03/10 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
2020/10/02 Javascript
跟老齐学Python之私有函数和专有方法
2014/10/24 Python
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
Java中重定向输出流实现用文件记录程序日志
2015/06/12 Python
Python的爬虫程序编写框架Scrapy入门学习教程
2016/07/02 Python
Python的requests网络编程包使用教程
2016/07/11 Python
python中kmeans聚类实现代码
2018/02/23 Python
使用python实现语音文件的特征提取方法
2019/01/09 Python
pandas 空数据处理方法详解
2019/11/02 Python
Python HTTP下载文件并显示下载进度条功能的实现
2020/04/02 Python
pytorch 常用函数 max ,eq说明
2020/06/28 Python
使用Keras建立模型并训练等一系列操作方式
2020/07/02 Python
详解Html5页面实现下载文件(apk、txt等)的三种方式
2018/10/22 HTML / CSS
Woolworth官网:澳洲第一大超市
2017/06/25 全球购物
12岁生日感言
2014/01/21 职场文书
房地产销售经理岗位职责
2015/02/02 职场文书
爱心募捐通知范文
2015/04/27 职场文书
Nginx 常用配置
2022/05/15 Servers