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的更多相关文章

  1. Vuex内容解析和vue cli项目中使用状态管理模式Vuex

    中文文档:vuex官方中文网站 一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: }, gett ...

  2. vue.cli项目中src目录每个文件夹和文件的用法

    assets文件夹是放静态资源:components是放组件:router是定义路由相关的配置:view视图:app.vue是一个应用主组件:main.js是入口文件:

  3. vue cli 项目中设置背景图

    https://blog.csdn.net/MoLvSHan/article/details/78204972 不能直接写成相对路径,像下面这这种就会报错 backgroundImage: " ...

  4. 前端学习笔记系列一:10整体移动vscode代码块、VSCode 使用 stylus,配置格式化设置、在vue项目中引入bootstrap

    1.整体移动vscode代码块 凭借操作的经验我们能够轻松地知道将代码整体往右移只需选中代码按Tab键即可.其实往左移也很简单: 选中之后按下 shift+Tab键 即可. 2.VSCode 使用 s ...

  5. vue-cli+webpack在生成的项目中使用bootstrap方法(二)

    vue-cli+webpack在生成的项目中使用bootstrap方法(一)中,是通过手动下载bootstrap库,然后手动添加到src/assets中,显然是过程太多. 当然是可以更省力些,可以通过 ...

  6. 改造@vue/cli项目为服务端渲染-ServerSideRender

    VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...

  7. Vue+Typescript项目中使用echarts

    方案一:推荐 在typescript+Vue的项目中引用echarts,为了加强引用,引入echarts和@types/echarts两个包,一个是工程依赖,一个是声明依赖. npm install ...

  8. 在 React项目中使用 bootstrap

    在使用create-react-app 创建的项目中使用 bootstrap; 安装react-bootstrap; npm install react-bootstrap --savenpm ins ...

  9. 在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理

    在一些内部OA或者流转的文件,或者给一些客户的报价文件.合同,或者一些医院出示的给保险机构的病历资料等,有时候可能都希望快速的使用电子签章的处理方式来给文件盖上特定的印章,本篇随笔介绍基于Vue&am ...

  10. 在基于ABP框架的前端项目Vue&Element项目中采用电子签名的处理

    在前面随笔介绍了<在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理>的处理,有的时候,我们在流程中或者一些文件签署的时候,需要签上自己的大名,一 ...

随机推荐

  1. <JavaScript>如何阅读《JavaScript高级程序设计》(一)

    题外话 最近在看<JavaScript高级程序设计>这本书,面对着700多页的厚书籍,心里有点压力,所以我决定梳理一下..探究一下到底怎么读这本书.本书的内容好像只有到ES5...所以只能 ...

  2. CentOS / RHEL 配置yum源

    CentOS / RHEL 配置yum源 */--> CentOS / RHEL 配置yum源 Table of Contents 1. 前言 2. 关于yum 2.1. yum是什么 2.2. ...

  3. jQuery常用Method-API

    目的:对web页面(HTML/JSP/XML)中的任何标签,属性,内容进行增删改查 (1)DOM简述与分类 (A)DOM是一种W3C官方标准规则,可访问任何标签语言的页面(HTML/JSP/XML) ...

  4. Spring策略模式的实现

    场景: 有时候一个业务方法有多个实现类,需要根据特定的情形进行业务处理. 例如:商店支付,我们可以使用支付宝.微信扫描农行.xxx行的快捷支付(而不是微信支付.支付宝支付二维码)购买商品. 实现代码( ...

  5. python基础知识(函数2)

    返回值 return return[value]  多个值用,逗号分开,没有返回值,会返回none值,函数不给指定返回值也会返回none值 def functionname(p1,p2,p3): re ...

  6. python3速查参考- python基础 3 -> -> while循环实例 + Continue && break的应用 + 列表的初步学习

    while语句的应用 实例如下: """ 述求:用户登录系统,最多只能登录三次 第三次失败后,程序终止 """ user_table = { ...

  7. Windows配置jdk环境变量

    配置环境变量 前置条件:已经安装jdk以及jre 操 作:右击"我的电脑"-->"属性"-->"高级系统设置"-->&qu ...

  8. 《精通并发与Netty》学习笔记(02 - 服务端程序编写)

    上节我们介绍了开发netty项目所必需的开发环境及工具的使用,这节我们来写第一个netty项目 开发步骤 第一步:打开https://search.maven.org 找到netty依赖库 第二步:打 ...

  9. ValueError: numpy.dtype has the wrong size, try recompiling

    问题ValueError: numpy.dtype has the wrong size, try recompiling解决 这是因为 Python 包的版本问题,例如安装了较旧版本的 Numpy, ...

  10. flex 遇上white-space:nowrap的2种解决方法

    需求:使用flex布局,超出部分想使用点点点显示 一.方法1使用min-width:0 效果: HTML代码如下: <div class="team-body"> &l ...