@vuecli 5.0.4引入bootstrap的方法

@vuecli 5.0.4引入bootstrap的方法,第1张

说明:

新版本的脚手架中没有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样式

欢迎分享,转载请注明来源:内存溢出

原文地址:https://www.54852.com/web/932338.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-05-17
下一篇2022-05-17

发表评论

登录后才能评论

评论列表(0条)

    保存