vue-cli 引入jQuery,Bootstrap,popper的方法

 更新时间:2018年09月03日 15:02:58   作者:ln0909  
这篇文章主要介绍了vue-cli 引入jQuery,Bootstrap,popper的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • vue3输入单号和张数如何自动生成连号的单号

    vue3输入单号和张数如何自动生成连号的单号

    最近遇到这样的需求输入连号事件,需要在表格中输入物流单号,物流号码,生成的数量,名称,点击确定自动生成固定数量的连号物流单号,本文重点介绍vue3输入单号和张数,自动生成连号的单号,感兴趣的朋友一起看看吧
    2024-02-02
  • Vue3.4中v-model双向数据绑定新玩法详解

    Vue3.4中v-model双向数据绑定新玩法详解

    defineModel 是一个新的 <script setup> 宏,旨在简化支持 v-model 的组件的实现, 这个宏用来声明一个双向绑定 prop,下面我们就来看看他的具体使用吧
    2024-03-03
  • Vue学习之axios的使用方法实例分析

    Vue学习之axios的使用方法实例分析

    这篇文章主要介绍了Vue学习之axios的使用方法,结合实例形式分析了vue.js axios库的功能及网络请求相关操作技巧,需要的朋友可以参考下
    2020-01-01
  • 使用Vue实现瀑布流的示例代码

    使用Vue实现瀑布流的示例代码

    这篇文章主要为大家详细介绍了如何使用Vue实现瀑布流,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-02-02
  • 从零开始在vue-cli4配置自适应vw布局的实现

    从零开始在vue-cli4配置自适应vw布局的实现

    这篇文章主要介绍了从零开始在vue-cli4配置自适应vw布局,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • vuejs如何解决浏览器切换页面后setInterval计时器停止执行的问题

    vuejs如何解决浏览器切换页面后setInterval计时器停止执行的问题

    setinterval()是定时调用的函数,可按照指定的周期(以毫秒计)来调用函数或计算表达式,这篇文章主要给大家介绍了关于vuejs如何解决浏览器切换页面后setInterval计时器停止执行的问题,需要的朋友可以参考下
    2024-01-01
  • Vue之Dep和Observer的用法及说明

    Vue之Dep和Observer的用法及说明

    这篇文章主要介绍了Vue之Dep和Observer的用法及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • Vue中数组与对象修改触发页面更新的机制与原理解析

    Vue中数组与对象修改触发页面更新的机制与原理解析

    这篇文章主要介绍了Vue中关于数组与对象修改触发页面更新的机制与原理简析,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-12-12
  • vue移动端微信授权登录插件封装的实例

    vue移动端微信授权登录插件封装的实例

    今天小编就为大家分享一篇vue移动端微信授权登录插件封装的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Vue组件的使用教程详解

    Vue组件的使用教程详解

    组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。这篇文章给大家介绍了vue组件的使用,需要的朋友参考下吧
    2018-01-01

最新评论