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

1.安装插件npminstalljquery--save//jquery插件npminstallbootstrap--save//bootstrapnpminstall--savepopper.js//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

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

vue-cli引入jQuery vue-cli引入Bootstrap vue-cli引入popper