vue-cli如何引入bootstrap工具
以下操作以正常安装node环境为前提。
1.引入jq:
在npm控制台中,进入项目目录,然后输入指令npm install jquery --save-dev(npm换成cnpm更好,国内环境下使用cnpm下载速度更快)。
2.修改build目录下的webpack.base.conf.js配置文件:
1)加入webpack对象:var webpack=require('webpack');
2)在module.exports里面加入以下配置:
plugins: [
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
"windows.jQuery":"jquery"
})
]
3)在入口文件main.js中加入:import jquery from 'jquery'
3.引入bootstrap:
1)修改webpack.base.conf.js文件:
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'assets': path.resolve(__dirname, '../src/assets'),
'jquery': "jquery/src/jquery"
}
2)在入口文件main.js中加入:
import './assets/css/bootstrap.min.css'
import './assets/js/bootstrap.min'
3)在assets文件目录中拷贝bootstrap各种文件:

vue-cli如何引入bootstrap工具的更多相关文章
- 前端学习笔记系列一:10整体移动vscode代码块、VSCode 使用 stylus,配置格式化设置、在vue项目中引入bootstrap
		1.整体移动vscode代码块 凭借操作的经验我们能够轻松地知道将代码整体往右移只需选中代码按Tab键即可.其实往左移也很简单: 选中之后按下 shift+Tab键 即可. 2.VSCode 使用 s ... 
- 每天一点点之vue框架开发 - 引入bootstrap
		只使用css样式 如果在你的项目中只是使用css样式,那就不需要安装,直接全局引入样式就好 <link rel="stylesheet" href="https ... 
- vue项目中引入bootstrap
		(1)引入Jquery文件,需要在bootstrap.min.js 之前引入. 1.npm install jquery --save-dev 2. plugins: [ new webpack.Pr ... 
- vue中全局引入bootstrap.css
		1.首先在官网上下载bootstrap的压缩包(必须是官网上下载的) 将压缩包解压后引入在项目文件夹下面.如下图所示: 2.在main.js中引入 import './assets/bootstrap ... 
- vue系列之vue cli 3引入ts
		插件 Vue2.5+ Typescript 引入全面指南 vue-class-component强化 Vue 组件,使用 TypeScript/装饰器 增强 Vue 组件 vue-property-d ... 
- vue/cli 3 引入 使用jQuery
		注意这里配置的是vue-cli3.0引入jquery的方法,不是vue-cli2.0的配置方法 一.安装jquery npm install jquery --save 二.一般安装成功后在packa ... 
- 每天一点点之vue框架开发 - 引入Jquery
		1. 安装jquery npm install jquery --save-dev 2.在build/webpack.base.conf.js中添加如下内容 var webpack = require ... 
- 关于Vue.cli 脚手架环境中引入Bootstrap时,table表格样式缺失的解决办法
		Vue+bootstrap不能正常使用table的样式 环境:下载官网的本地bootstrap包,然后在vue 的index.html引入bootstrap的css和js环境 问题描述:1. vue里 ... 
- Vue CLI 是如何实现的 -- 终端命令行工具篇
		Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供了终端命令行工具.零配置脚手架.插件体系.图形化管理界面等.本文暂且只分析项目初始化部分,也就是终端命令行工具的实现. 0. 用法 ... 
随机推荐
- 团队作业4——第一次项目冲刺(Alpha版本)4.23
			·本次会议为第二次Scrum Meeting会议~ ·本次会议项目经理召开时间为17:00,在教学楼教室召开,召开时长约30分钟,探讨了昨日任务的进展.查重功能.今日要做的任务以及后续所要开展的工作. ... 
- 201521123097《Java程序设计》第二周学习总结
			1.本周学习总结 (1)学习了java的一些类型和变量. (2)学习了码云的部分功能的使用. 2.书面作业 使用Eclipse关联jdk源代码,并查看String对象的源代码. 为什么要尽量频繁的对字 ... 
- VBScript中Msgbox函数的用法
			MsgBox(prompt[, buttons][, title][, helpfile, context]) [用途]:弹出对话框,并获取用户的操作结果. [参数说明]: propmt:对话框中展示 ... 
- 201521123088《Java程序设计》第12周学习总结
			1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对象(属性:int id, String name,int age,doubl ... 
- Java第十三周总结
			1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu ... 
- 201521123053《Java程序设计》第十一周学习总结
			1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 我还是比较喜欢XMind思维导图 延续上周对线程的知识点总结,对多线程知识点进行扩充. 知识点: synchron ... 
- 编程从入门到提高,然后放弃再跑路(Java)
			1.Java入门篇 1.1 基础入门和面向对象 1.1.1 编程基础 [01] Java语言的基本认识 [02] 类和对象 [03] 类的结构和创建对象 [04] 包和访问权限修饰符 [05] 利用p ... 
- [05] Session概要
			1.Session是什么 除了使用Cookie,Web应用程序中还经常使用Session来记录客户端状态,即Session是服务器端使用的一种保存客户端状态的机制.Cookie在客户端,Session ... 
- 03标准对象-01-Date和JSON
			0.写在前面的话 在JS世界中,一切都是对象,区别对象类型使用tyepof,返回一个字符串,如: typeof 123; // 'number' typeof NaN; // 'number' typ ... 
- ng-model值字符串转数值型(convertToNumber directive)
			<select ng-model="model.id" convert-to-number> <option value="0">Zer ... 
