Vue 引入jQuery和Bootstrap

 当vue项目使用vue-cli搭建完成后引入jQuery和Bootstrap 

一、引入JQuery

$ npm install jquery --save-dev

$ cnpm install jquery --save-dev

在搭建的vue项目下找到build文件，打开找到webpack.base.conf.js

在webpack.config.js 添加内容

var webpack = require("webpack");

//在module.exports里面配置引入的jQuery
module.exports = {
	plugins: [
		new webpack.ProvidePlugin({
			$: "jquery",
			jQuery: "jquery"
		})
	],
}

在main.js里面加入

import $ from 'jquery'

在package.json中查找jQuery是否安装成功。

再引入Bootstrap

cnpm install bootstrap@3.3.07 --save-dev

在webpack.config.js 添加内容

module.exports = {
	resolve: {
		extensions: ['.js', '.vue', '.json'],
		alias: {
			'vue$': 'vue/dist/vue.esm.js',
			'@': resolve('src'),
			'bootstrap': resolve('src/assets/bootstrap'),
		}
	},
	plugins: [
		new webpack.ProvidePlugin({
			$: "jquery",
			jQuery: "jquery",
			"windows.jQuery": "jquery",
			Popper: ['popper.js', 'default'],
		})
	],
}

在main.js里面引入bootstarp

//放在引入jQuery的前面
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
import '../node_modules/bootstrap/dist/js/bootstrap.min'

安装bootstrap的依赖

cnpm install ajv@^6.0.0
cnpm install popper.js@^1.14.3

然后运行项目 cnpm run dev