一、引入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的更多相关文章

  1. 如何在jsp中引入bootstrap

    如何在jsp中引入bootstrap包: 1.首先在http://getbootstrap.com/上下载Bootstrap的最新版. 您会看到两个按钮: Download Bootstrap:下载 ...

  2. vue项目引入bootstrap正确姿势

    vue如何引入bootstrap 最近在玩全栈,自然少不了vue的使用.使用vue-cli生成的项目想引入bootstrap,需要先安装相应的npm包,然后在代码中显示引入. 1.安装依赖包: cnp ...

  3. vue项目引入bootstrap、jquery

    在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...

  4. Vue中引入bootstrap导致的CSS问题

    最近在进行vue.js+webpack进行模块化开发的时候,遇到一个奇怪的问题. 问题是这样的: 1. 在main.js文件中引入bootstrap的js和css. 2. 自己写了一个Header.v ...

  5. 如何在vue中引入图片?

    当我们在Vue.js项目中引用图片时,关于图片路径有以下几种情形: 使用一. 我们在data里面定义好图片路径 imgUrl:'../assets/logo.png' 然后,在template模板里面 ...

  6. 如何在vue里实现同步阻塞请求,请求完成之前不加载页面或组件?

    https://segmentfault.com/q/1010000013787292 答案: getUserInfo函数数据请求下来,设置开关flag=true,页面最外层box v-if=&quo ...

  7. vue引入bootstrap——webpack

    想要在vue中引入bootstrap,引入的时候需要按照如下的步骤进行. 1.引入jquery 2.引入bootstrap   阅读本文前,应该能够搭建环境,使用vue-cli进行项目的创建,可以参考 ...

  8. vuejs 使用vue-cli引入bootstrap

    前言:对于刚刚进入vuejs的队伍中的小白来讲,很多都是模糊的,js操作dom节点的思想萦绕,还不能自由切换在二者之间. 解决之道: 想要在vue中引入bootstrap,引入的时候需要按照如下的步骤 ...

  9. 非常简单的vue里面引入jquery

    如何在vue里面引入jq了,只需四部就完成 第一步 cnpm install jquery 第二步 打开build文件夹 , 打开webpack.base.conf.js文件找到下面module.ex ...

随机推荐

  1. 编程范式 --- 函数式编程(Funtional Programming,简称FP)

    函数式编程(Funtional Programming,简称FP)是一种编程范式,也就是如何编写程序的方法论 主要思想:把计算过程尽量分解成一系列可复用函数的调用 主要特征:函数是"第一等公 ...

  2. linux&shell学习系列

    1.VMware安装Centos7虚拟机 2.Linux之vim详解 3.linux后台运行的几种方式 4.linux权限管理 5.linux之用户和用户组管理详解 6.grep文本搜索工具详解 7. ...

  3. Spring MVC-从零开始-view-直接返回页面不传data

    1.applicationContext配置 <?xml version="1.0" encoding="UTF-8"?> <beans xm ...

  4. 005-做题:使用 Python 生成 200 个激活码

    题目:使用 Python 生成 200 个不重复的激活码 编写思路# 激活码一般是由26个大写字母和10个数字任意组合而成# 长度为12位或者16位的居多激活码# 一个激活码里的字符是可以重复的,而且 ...

  5. php无限级分类实战——评论及回复功能

    经常在各大论坛或新闻板块详情页面下边看到评论功能,当然不单单是直接发表评论内容那么简单,可以对别人的评论进行回复,别人又可以对你的回复再次评论或回复,如此反复,理论上可以说是没有休止,从技术角度分析很 ...

  6. Map(映射)

    散列表介绍: 数组和链表都可以是有序的(即存储顺序与取出顺序一致),但这样是有代价的,需要遍历才可以寻找某一特定元素: 而还有另外的一些存储结构:不在意元素的顺序,能够快速的查找元素的数据 其中就有一 ...

  7. 校园网 虚拟机VMware Linux桥接模式 无法上网 问题

    只是解决常见虚拟机桥接模式 无法上网问题,基本的百度都有 基本知识 虚拟机有三种网络连接模式:桥接模式,net模式,仅主机 桥接模式:同一网段允许的话,相当于一个独立的物理主机,独立ip net模式: ...

  8. 超大规模商用 K8s 场景下,阿里巴巴如何动态解决容器资源的按需分配问题?

    作者 | 张晓宇(衷源)  阿里云容器平台技术专家 关注『阿里巴巴云原生』公众号,回复关键词"1010",可获取本文 PPT. 导读:资源利用率一直是很多平台管理和研发人员关心的话 ...

  9. CONVERT用法指南,时间字段截取方法

    语法: CONVERT(VARCHAR(7),<字段名称>,121) 时间转字符:select CONVERT(VARCHAR(7),dyxq,121),* from TBYPKC03-- ...

  10. SEER区块浏览器开发指南

    区块浏览器基本功能 区块链浏览器是浏览区块链信息的主要窗口,每一个区块所记载的内容都可以从区块链浏览器上进行查阅.用户可以使用区块链浏览器查询记录在区块中的交易信息,包括转账.预测.账户管理和社区治理 ...