在vue-cli项目中使用bootstrap的方法示例
在一个html页面中加入bootstrap是很方便,就是一般的将css和js文件通过Link和Script标签就行。
那么在一个用vue-cli生成的前端项目中如何加入?因为框架不一样了,略微要适应一下。
安装插件:
npm install jquery --save
npm install bootstrap --save
npm install popper.js --save
配置webpack.base.conf.js
//在顶部添加
const webpack = require('webpack')
//在module.exports = {}末尾添加下面代码 module.exports = {
...
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
}
main.js中添加
import $ from 'jquery'
import 'bootstrap'
测试jquery
//在vue文件中添加测试代码 <script>
$(function () {
alert('')
}) export default {
name: 'App'
}
</script>
测试bootstrap
<template>
<div class="container">
<div class="row">
<div class="col-md-6">
<button class="btn btn-primary">测试按钮</button>
</div>
</div>
</div>
</template>
在vue-cli项目中使用bootstrap的方法示例的更多相关文章
- vue-cli+webpack在生成的项目中使用bootstrap的方法
在一个html页面中加入bootstrap是很方便,就是一般的将css和js文件通过Link和Script标签就行.那么在一个用vue-vli生成的前端项目中如何加入?因为框架不一样了,略微要适应一下 ...
- 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 ...
随机推荐
- [javascript]multipart/form-data上传格式表单自定义创建
<!DOCTYPE html> <html> <head> <title></title> </head> <body&g ...
- tcpdump详解
tcpdump -i eth1 'host 121.14.84.221 and greater 76' -Ap -v -s10000 抓取 eth1 和 121.14.84.221 上的所有长度大于7 ...
- struts2 过滤器和拦截器的区别和使用
java web 过滤器和拦截器的区别和使用 1.1 什么是拦截器: 拦截器,在AOP(Aspect-Oriented Programming)中用于在某个方法或字段被访问之前,进行拦截然 ...
- jquery easyui datagrid 加每页合计和总合计
jquery easyui datagrid 加每页合计和总合计 一:效果图 二:代码实现 这个只有从后台来处理 后台根据rows 和page两个参数返回的datatable 命名为dt 然后根据dt ...
- 图片文字css小知识点
行内元素,图片和文字中间有缝隙,需要给父元素设置font-size:0: 图片和文字不对齐,给图片设置vertical-align:top 文字行高有缝隙 设置vertical-align:top
- kernel_size
kernel_size=(1,3)[flag] if flag==True:kernel_size=3 else: kernel_size=1
- 如何打包/运行jar包,及生成exe文件
关于如何打包/运行jar包,以及生成exe文件.之前各种查询.博客,终于搞明白究竟是咋回事.记得还做过笔记的.今天要打包生成exe用的时候,居然忘了咋怎来着.去查看之前的笔记,死活没找到(好像被删掉了 ...
- 【python】内存相关
1. /proc/pid/status 可以查看进程相关的详细信息,当内存异常时可查看 参考:http://blog.csdn.net/beckdon/article/details/4849190 ...
- Android学习基础部分
今天是放寒假的第四天,这几天加上放假前总共弄了一些Android编程的基础部分,比如下载sdk.配置环境.下载Eclipse的插件(ADT).下载Android Studio.VirtualBox.G ...
- 监控CPU使用率并发送报警邮件
#!/bin/bash DATE=$(date +%F" "%H:%M) #只支持centos6 IP=$(ifconfig eth0 | awk -F '[ :]+' '/ine ...