在vue-cli项目中使用bootstrap
1.安装插件
npm install jquery --save
npm install bootstrap --save
npm install popper.js --save
2.配置webpack.base.conf.js
//在顶部添加
const webpack = require('webpack') //在module.exports = {}末尾添加下面代码
module.exports = {
...
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
}
3.在main.js中导入
import $ from 'jquery'
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'
4.测试jquery
//在vue文件中添加测试代码 <script>
$(function () {
alert('jquery!')
}) export default {
name: 'App'
}
</script>
5.测试bootstrap
<button type="button" class="btn btn-success">bootstrap测试</button>
在vue-cli项目中使用bootstrap的更多相关文章
- Vuex内容解析和vue cli项目中使用状态管理模式Vuex
中文文档:vuex官方中文网站 一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: }, gett ...
- vue.cli项目中src目录每个文件夹和文件的用法
assets文件夹是放静态资源:components是放组件:router是定义路由相关的配置:view视图:app.vue是一个应用主组件:main.js是入口文件:
- vue cli 项目中设置背景图
https://blog.csdn.net/MoLvSHan/article/details/78204972 不能直接写成相对路径,像下面这这种就会报错 backgroundImage: " ...
- 前端学习笔记系列一:10整体移动vscode代码块、VSCode 使用 stylus,配置格式化设置、在vue项目中引入bootstrap
1.整体移动vscode代码块 凭借操作的经验我们能够轻松地知道将代码整体往右移只需选中代码按Tab键即可.其实往左移也很简单: 选中之后按下 shift+Tab键 即可. 2.VSCode 使用 s ...
- vue-cli+webpack在生成的项目中使用bootstrap方法(二)
vue-cli+webpack在生成的项目中使用bootstrap方法(一)中,是通过手动下载bootstrap库,然后手动添加到src/assets中,显然是过程太多. 当然是可以更省力些,可以通过 ...
- 改造@vue/cli项目为服务端渲染-ServerSideRender
VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...
- Vue+Typescript项目中使用echarts
方案一:推荐 在typescript+Vue的项目中引用echarts,为了加强引用,引入echarts和@types/echarts两个包,一个是工程依赖,一个是声明依赖. npm install ...
- 在 React项目中使用 bootstrap
在使用create-react-app 创建的项目中使用 bootstrap; 安装react-bootstrap; npm install react-bootstrap --savenpm ins ...
- 在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理
在一些内部OA或者流转的文件,或者给一些客户的报价文件.合同,或者一些医院出示的给保险机构的病历资料等,有时候可能都希望快速的使用电子签章的处理方式来给文件盖上特定的印章,本篇随笔介绍基于Vue&am ...
- 在基于ABP框架的前端项目Vue&Element项目中采用电子签名的处理
在前面随笔介绍了<在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理>的处理,有的时候,我们在流程中或者一些文件签署的时候,需要签上自己的大名,一 ...
随机推荐
- Java中AWT、Swing与SWT三大GUI技术的原理与效率差异
Java中AWT.Swing与SWT三大GUI技术的原理与效率差异 转 https://blog.csdn.net/weixin_37703598/article/details/81843810 ...
- react-native关闭所有黄色警告
写RN经常会遇到黄色警告,很无奈,很多很多的黄色警告都是由组件自己导致的,建议在index.js 内的 AppRegistry.registerComponent('shareFile', () =& ...
- 短信的内容提供者Uri和短信表结构
* sms表 * address :手机号码 * date :收发短信的时间 * read :短信的阅读状态 1,已读 0,未读 * type :收发短信的类型 1,收到短信 2,发出短信 * bod ...
- JDK1.8为什么废弃永久代【一篇就够】[z]
https://blog.csdn.net/sjmz30071360/article/details/89456177 (Metaspace) 1.背景 2.为什么废弃永久代(PermGen) 3.深 ...
- RabbitMQ学习之:(二)介绍 (转贴+我的评论)
转自:http://lostechies.com/derekgreer/2012/03/05/rabbitmq-for-windows-introduction/ RabbitMQ for Windo ...
- java 语言实现豆瓣电影信息查询
豆瓣上面有很多电影,有时候要查看个电影信息,去豆瓣搜下还是很方便的,但是如何通过接口的形式来查看豆瓣电影,这对于很多网站.app其实是非常实用的功能,这里笔者附上一个java实现的豆瓣电影信息获取的代 ...
- ASP.NET Core 入门笔记10,ASP.NET Core 中间件(Middleware)入门
一.前言 1.本教程主要内容 ASP.NET Core 中间件介绍 通过自定义 ASP.NET Core 中间件实现请求验签 2.本教程环境信息 软件/环境 说明 操作系统 Windows 10 SD ...
- SpringBoot使用AOP获取请求参数
最近试了下拦截controller方法查看请求参数,方式如下: package com.*.aop; import com.alibaba.fastjson.JSON; import com.alib ...
- maven 运行web工程
1.使用命令mvn package,将工程打包成war包 2.把war包放置到tomcat的webapps目录下,运行tomcat
- PowerShell .Net整套环境搭建及部署系列
此系列包含一套完整的集群部署,全是个人原创(除第一个是摘抄的),转载请注明出处 其中DFS部分在国内资料极少,且全是重复的,还是外面好些,有问题可以给出解决方案 若内容有不详之处或你也同样被DFS所困 ...