一、引入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. 商用hadoop集群的配置命令分布

    角色 安装 hdfs配置 yarn配置 hdfs 格式化 启动yarn服务 启动hdfs服务 master yum install hadoop-hdfs-namenode yum install h ...

  2. impala对元数据的界面更新操作

    执行 impala-shell 即能进入界面操作sql.如果在hive更新了数据之后,而在impala中却无法看到更新后的数据的话,意味着impala里元数据信息还没有刷新,此时在impala操作界面 ...

  3. Android导入Burp Suite证书抓包HTTPS

    需求 Android APP安全测试时,主要工作分为: APK安全 业务安全 APK安全这里不讨论,我说说业务安全,因为大部分的业务校验逻辑还是放在Servier端,这里就会涉及到网络通信了.因此网络 ...

  4. mybatis-dynamic-query 3.0 更新

    项目地址: mybatis-dynamic-query 前言 在 2.0 完成对 tk.mapper 集成,为何 mybatis-dynamic-query 选择 tk.mapper 集成, 再 3. ...

  5. 当我们在聊 Serverless 时你应该知道这些

    作者 | 杨泽强(竹涧)阿里云技术专家 说起当前最火的技术,除了最新的区块链.AI,还有一个不得不提的概念是 Serverless.Serverless 作为一种新型的互联网架构,直接或间接推动了云计 ...

  6. 自动下载zar配置管理

    maven 下载: https://maven.apache.org/ 官网 download 下载:Binary zip archive apache-maven-3.6.2-bin.zip 免安装 ...

  7. JavaScript设计模式——原型模式

    原型模式: 原型模式是指原型实例指向创建对象的种类,并通过拷贝这些原型创建新的对象,是一种用来创建对象的模式,也就是创建一个对象作为另一个对象的prototype属性: prototype警告:学习了 ...

  8. Vue-懒加载(判断元素是否在可视区域内)

    上公式: 元素距离顶部高度(elOffsetTop) >= dom滚动高度(docScrollTop) 并且元素距离顶部高度(elOffsetTop) < (dom滚动高度 + 视窗高度) ...

  9. C#中的等值判断1

    目录 简介 值类型和引用类型的相等比较 和相等比较相关的函数 string 和 System.Uri 的等值比较 泛型接口 IEquatable<T> 自定义比较方法 举例 总结 简介 最 ...

  10. Cocos Creator 通用框架设计 —— 网络

    在Creator中发起一个http请求是比较简单的,但很多游戏希望能够和服务器之间保持长连接,以便服务端能够主动向客户端推送消息,而非总是由客户端发起请求,对于实时性要求较高的游戏更是如此.这里我们会 ...