[JavaScript知识库]@vue/cli 5.0.4引入bootstrap的方法

说明：

新版本的脚手架中没有build目录，安装bootstrap的方法和旧版本脚手架安装bootstrap的方法略有不同，为避免笔者忘记新版本如何安装脚手架作此文。

1. 查看当前脚手架版本：

在命令行中输入vue -V可以查看到当前脚手架版本

（查看脚手架版本之前需要先确定电脑中已经安装node环境“node -v”与JavaScript生态包"npm -v"了）

在命令行中看到脚手架版本超过2.0，即可使用本文安装bootstrap的方法

如果电脑中没有安装脚手架在命令行中执行"cnpm install -g @vue/cli"安装新版本的脚手架工具

2.安装bootstrap：

在vscode中打开需要导入bootstrap的项目，在vscode终端输入以下代码安装bootstrap

npm install bootstrap@3

3. 安装jQuery:

npm install jquery

4. 配置vue.config.js：

const webpack = require('webpack')
module.exports = {
	chainWebpack: (config) => {
		config.plugin('provide').use(webpack.ProvidePlugin, [{
			$: 'jquery',
			jquery: 'jquery',
			jQuery: 'jquery',
			'window.jQuery': 'jquery'
		}])
	},
	css: {
		sourceMap: true
	}
}

5. 在main.js中写

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'

引入成功，可以直接在bootstrap官网中cv样式

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖