如何在vue里引入Bootstrap
一、引入jquery
步骤:
1. 安装jquery
$ npm install jquery --save-dev
2.在webpack.config.js 添加内容
+ const webpack = require("webpack"); module.exports = {
entry: './index.js',
output: {
path: path.join(__dirname, './dist'),
publicPath: '/dist/',
filename: 'index.js'
}, + plugins: [
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery'
})
]
}
3.在入口文件index.js 里面添加内容
import $ from 'jquery' ;
4.测试一下是否安装成功,看看能否弹出'123'
<template>
<div>
Hello world!
</div>
</template> <script>
$(function () {
alert(123);
}); export default { };
</script> <style> </style>
二、引入Bootstrap
1.安装Bootstrap
$ npm install --save-dev bootstrap
2.在入口文件index.js里引入相关
import './node_modules/bootstrap/dist/css/bootstrap.min.css';
import './node_modules/bootstrap/dist/js/bootstrap.min.js';
3.添加一段Bootstrap代码
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
4.运行,查看效果 这些按钮已经变成Bootstrap按钮组了
如何在vue里引入Bootstrap的更多相关文章
- 如何在jsp中引入bootstrap
如何在jsp中引入bootstrap包: 1.首先在http://getbootstrap.com/上下载Bootstrap的最新版. 您会看到两个按钮: Download Bootstrap:下载 ...
- vue项目引入bootstrap正确姿势
vue如何引入bootstrap 最近在玩全栈,自然少不了vue的使用.使用vue-cli生成的项目想引入bootstrap,需要先安装相应的npm包,然后在代码中显示引入. 1.安装依赖包: cnp ...
- vue项目引入bootstrap、jquery
在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...
- Vue中引入bootstrap导致的CSS问题
最近在进行vue.js+webpack进行模块化开发的时候,遇到一个奇怪的问题. 问题是这样的: 1. 在main.js文件中引入bootstrap的js和css. 2. 自己写了一个Header.v ...
- 如何在vue中引入图片?
当我们在Vue.js项目中引用图片时,关于图片路径有以下几种情形: 使用一. 我们在data里面定义好图片路径 imgUrl:'../assets/logo.png' 然后,在template模板里面 ...
- 如何在vue里实现同步阻塞请求,请求完成之前不加载页面或组件?
https://segmentfault.com/q/1010000013787292 答案: getUserInfo函数数据请求下来,设置开关flag=true,页面最外层box v-if=&quo ...
- vue引入bootstrap——webpack
想要在vue中引入bootstrap,引入的时候需要按照如下的步骤进行. 1.引入jquery 2.引入bootstrap 阅读本文前,应该能够搭建环境,使用vue-cli进行项目的创建,可以参考 ...
- vuejs 使用vue-cli引入bootstrap
前言:对于刚刚进入vuejs的队伍中的小白来讲,很多都是模糊的,js操作dom节点的思想萦绕,还不能自由切换在二者之间. 解决之道: 想要在vue中引入bootstrap,引入的时候需要按照如下的步骤 ...
- 非常简单的vue里面引入jquery
如何在vue里面引入jq了,只需四部就完成 第一步 cnpm install jquery 第二步 打开build文件夹 , 打开webpack.base.conf.js文件找到下面module.ex ...
随机推荐
- 编程范式 --- 函数式编程(Funtional Programming,简称FP)
函数式编程(Funtional Programming,简称FP)是一种编程范式,也就是如何编写程序的方法论 主要思想:把计算过程尽量分解成一系列可复用函数的调用 主要特征:函数是"第一等公 ...
- linux&shell学习系列
1.VMware安装Centos7虚拟机 2.Linux之vim详解 3.linux后台运行的几种方式 4.linux权限管理 5.linux之用户和用户组管理详解 6.grep文本搜索工具详解 7. ...
- Spring MVC-从零开始-view-直接返回页面不传data
1.applicationContext配置 <?xml version="1.0" encoding="UTF-8"?> <beans xm ...
- 005-做题:使用 Python 生成 200 个激活码
题目:使用 Python 生成 200 个不重复的激活码 编写思路# 激活码一般是由26个大写字母和10个数字任意组合而成# 长度为12位或者16位的居多激活码# 一个激活码里的字符是可以重复的,而且 ...
- php无限级分类实战——评论及回复功能
经常在各大论坛或新闻板块详情页面下边看到评论功能,当然不单单是直接发表评论内容那么简单,可以对别人的评论进行回复,别人又可以对你的回复再次评论或回复,如此反复,理论上可以说是没有休止,从技术角度分析很 ...
- Map(映射)
散列表介绍: 数组和链表都可以是有序的(即存储顺序与取出顺序一致),但这样是有代价的,需要遍历才可以寻找某一特定元素: 而还有另外的一些存储结构:不在意元素的顺序,能够快速的查找元素的数据 其中就有一 ...
- 校园网 虚拟机VMware Linux桥接模式 无法上网 问题
只是解决常见虚拟机桥接模式 无法上网问题,基本的百度都有 基本知识 虚拟机有三种网络连接模式:桥接模式,net模式,仅主机 桥接模式:同一网段允许的话,相当于一个独立的物理主机,独立ip net模式: ...
- 超大规模商用 K8s 场景下,阿里巴巴如何动态解决容器资源的按需分配问题?
作者 | 张晓宇(衷源) 阿里云容器平台技术专家 关注『阿里巴巴云原生』公众号,回复关键词"1010",可获取本文 PPT. 导读:资源利用率一直是很多平台管理和研发人员关心的话 ...
- CONVERT用法指南,时间字段截取方法
语法: CONVERT(VARCHAR(7),<字段名称>,121) 时间转字符:select CONVERT(VARCHAR(7),dyxq,121),* from TBYPKC03-- ...
- SEER区块浏览器开发指南
区块浏览器基本功能 区块链浏览器是浏览区块链信息的主要窗口,每一个区块所记载的内容都可以从区块链浏览器上进行查阅.用户可以使用区块链浏览器查询记录在区块中的交易信息,包括转账.预测.账户管理和社区治理 ...