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

福奇养生网还为您提供以下相关内容希望对您有帮助：

安装项目，使用 vue-cli 建立项目目录，无需赘述。若项目中需引入 Bootstrap 和 jQuery，可利用如下步骤实现。首先，打开命令行窗口，输入命令：npm install jQuery --save-dev，确保 jQuery 成功添加到项目依赖。接着，在 webpack.base.conf.js 配置文件的 module.exports 中加入以下代

1. Shreyu模板基于Bootstrap4.3.1构建，提供响应式设计，支持多导航布局与配色方案。通过SCSS变量实现快速定制，适配Gulp工作流，兼容Angular、React、Vue及Laravel。适用于数据仪表盘、CRM、CMS等现代Web应用开发。2. Vuesax模板纯Vue.js框架，无jQuery依赖，集成Vue CLI、Vuex、Vue Router及Webpack。特色...

对于vue的使用可以分为两种使用形式：1.引入vue.js文件，在js中将vue实例化；2.通过node安装第三方包--vue，搭建脚手架，用脚手架将页面分成几个组件编写，从而利用组件来搭建页面。引入vue.js的写法 Vue分为V层（视图层）和M层（数据层），一般都是由M层的数据来驱动V层的改变。而vue的常用指...

阶段1.前端核心基础HTML +_CSS核心、JavaScript基础语法、JavaScript面向对象、JavaScript DOM和BOM编程、jQuery框架阶段2.HTML5 + CSS3 + 移动端核心HTML5新特性、Canvas专列、CSS3新特性、CSS3进阶、CSS3实例演练阶段3.移动端移动端核心、移动端适配、移动端特效阶段4.服务器端服务器端开发、数据库操作...

JS基础/BOM和DOM操作 小米商城作业,js介绍和js引入,js数据类型、流程控制、函数等操作,js中的JSON,BOM对象的弹框、location对象、定时器、直接查找选择器、间接查找选择器、值操作、类值操作、样式操作、button按钮补充、事件和绑定事件的两种方式,常用事件练习 jQuery/Bootstrap 作业讲解,jquery介绍,引入、选择器、...

使用vue-cli搭建项目后，需引入Bootstrap和jQuery。在CMD中，通过npm install jQuery --save-dev命令添加jQuery依赖，然后在webpack.base.conf.js中使用webpack.ProvidePlugin进行配置，加入新的插件以提供jQuery。在main.js中，引入jQuery，格式为import $ from 'jquery'，紧接着引入Bootstrap，使用npm ...