在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项目中采用电子签章处理文件和打印处理>的处理,有的时候,我们在流程中或者一些文件签署的时候,需要签上自己的大名,一 ...
随机推荐
- vscode通过服务器打开html文件
之前讲到,安装open in brower插件之后可以直接右键选择使用浏览器渲染html文件,但是,这种打开方式是“本地打开方式” 那么我们怎么以服务的方式运行html呢: 1.下载插件:Live S ...
- 07 MySQL之视图
01-视图的含义 视图是从一个或者多个表中导出的,视图的行为与表非常相似,但视图是一个虚拟表.视图还可以从已经存在的视图的基础上定义. 02-创建视图 # 基本语法格式: CREATE [OR REP ...
- Nginx知识
OpenResty最佳实践->location匹配规则传说中图片防盗链的爱恨情仇
- grep 正则表达式用引号括起来和元字符加反斜杠转义的测试
grep 正则表达式用引号括起来和元字符加反斜杠转义的测试 实验在 grep 命令中的表达式:不加引号,加单引号,加双引号的区别,以及部分元字符前加与不加 `\’ 进行转义的区别.实验环境为“实验楼( ...
- ng build --aot 与 ng build --prod
angluar的编译有以下几种方式: ng build 常规的压缩操作 代码体积最大 ng build --aot angular预编译 代码体积较小 ng build --pr ...
- Java各种反射性能对比
对各种方法实现get方法的性能进行了一个测试. 总共有5个测试,,每个测试都是执行1亿次 1. 直接通过Java的get方法 2.通过高性能的ReflectAsm库进行测试 3.通过Java Clas ...
- JAVA 基础编程练习题6 【程序 6 求最大公约数及最小公倍数】
6 [程序 6 求最大公约数及最小公倍数] 题目:输入两个正整数 m 和 n,求其最大公约数和最小公倍数. 程序分析:利用辗除法. package cskaoyan; public class csk ...
- eclipse上新建Maven项目报错及解决
Could not calculate build plan: Plugin org.apache.maven.plugins:maven-resources-plugin:2.6 or one of ...
- Tei-Wei Kuo
一. A Commitment-based Management Strategy for the Performance and Reliability Enhancement of Flash-m ...
- (模板)hdoj1007(分治求平面最小点对)
题目链接:https://vjudge.net/problem/HDU-1007 题意:给定n个点,求平面距离最小点对的距离除2. 思路:分治求最小点对,对区间[l,r]递归求[l,mid]和[mid ...