vue-cli如何引入bootstrap工具
以下操作以正常安装node环境为前提。
1.引入jq:
在npm控制台中,进入项目目录,然后输入指令npm install jquery --save-dev(npm换成cnpm更好,国内环境下使用cnpm下载速度更快)。
2.修改build目录下的webpack.base.conf.js配置文件:
1)加入webpack对象:var webpack=require('webpack');
2)在module.exports里面加入以下配置:
plugins: [
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
"windows.jQuery":"jquery"
})
]
3)在入口文件main.js中加入:import jquery from 'jquery'
3.引入bootstrap:
1)修改webpack.base.conf.js文件:
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'assets': path.resolve(__dirname, '../src/assets'),
'jquery': "jquery/src/jquery"
}
2)在入口文件main.js中加入:
import './assets/css/bootstrap.min.css'
import './assets/js/bootstrap.min'
3)在assets文件目录中拷贝bootstrap各种文件:

vue-cli如何引入bootstrap工具的更多相关文章
- 前端学习笔记系列一:10整体移动vscode代码块、VSCode 使用 stylus,配置格式化设置、在vue项目中引入bootstrap
1.整体移动vscode代码块 凭借操作的经验我们能够轻松地知道将代码整体往右移只需选中代码按Tab键即可.其实往左移也很简单: 选中之后按下 shift+Tab键 即可. 2.VSCode 使用 s ...
- 每天一点点之vue框架开发 - 引入bootstrap
只使用css样式 如果在你的项目中只是使用css样式,那就不需要安装,直接全局引入样式就好 <link rel="stylesheet" href="https ...
- vue项目中引入bootstrap
(1)引入Jquery文件,需要在bootstrap.min.js 之前引入. 1.npm install jquery --save-dev 2. plugins: [ new webpack.Pr ...
- vue中全局引入bootstrap.css
1.首先在官网上下载bootstrap的压缩包(必须是官网上下载的) 将压缩包解压后引入在项目文件夹下面.如下图所示: 2.在main.js中引入 import './assets/bootstrap ...
- vue系列之vue cli 3引入ts
插件 Vue2.5+ Typescript 引入全面指南 vue-class-component强化 Vue 组件,使用 TypeScript/装饰器 增强 Vue 组件 vue-property-d ...
- vue/cli 3 引入 使用jQuery
注意这里配置的是vue-cli3.0引入jquery的方法,不是vue-cli2.0的配置方法 一.安装jquery npm install jquery --save 二.一般安装成功后在packa ...
- 每天一点点之vue框架开发 - 引入Jquery
1. 安装jquery npm install jquery --save-dev 2.在build/webpack.base.conf.js中添加如下内容 var webpack = require ...
- 关于Vue.cli 脚手架环境中引入Bootstrap时,table表格样式缺失的解决办法
Vue+bootstrap不能正常使用table的样式 环境:下载官网的本地bootstrap包,然后在vue 的index.html引入bootstrap的css和js环境 问题描述:1. vue里 ...
- Vue CLI 是如何实现的 -- 终端命令行工具篇
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供了终端命令行工具.零配置脚手架.插件体系.图形化管理界面等.本文暂且只分析项目初始化部分,也就是终端命令行工具的实现. 0. 用法 ...
随机推荐
- 201521123013 《Java程序设计》第6周学习总结
1. 本章学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 2. 书面作业 Q1.clone方法 1.1 Object ...
- 201521123099 《Java程序设计》第3周学习总结
1. 本周学习总结 2. 书面作业 1.代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; p ...
- 201521123045 《JAVA程序设计》 第14周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自 ...
- java System.currentTimeMillis()毫秒值和具体日期值互相转换
System.currentTimeMillis()与日期 间是可以相互转换的,通过 SimpleDateFormat dateformat = new SimpleDateFormat(" ...
- 《Head First 设计模式》读书笔记(1) - 策略模式
<Head First 设计模式>(点击查看详情) 1.写在前面的话 之前在列书单的时候,看网友对于设计模式的推荐里说,设计模式的书类别都大同小异,于是自己就选择了Head First系列 ...
- Java数据库连接泄漏应对办法-基于Weblogic服务器
临时解决连接泄漏方案 当连接泄漏真的发生了,无可避免时,我们采取以下方案,可临时解决连接问题,以争取修改代码的时间. 步骤1:选择待分析的JNDI数据源 步骤2(可选):可配置最大数据连接数量 步骤3 ...
- mybatis-resultMap使用与详解
1,当数据库的字段名与属性名称不一致时,在mybatis中如何处理? 第一种方式: 采用投影对字段重命名<select id="load" parameterType=&qu ...
- java web项目修改favicon.ico图标的方式
1.修改整个项目的tomcat图标 找到tomcat的根目录(tomcat-webapps-ROOT目录),然后将修改的favicon.ico图标覆盖掉本地的图标,然后再重启项目,刷新,清除浏览器缓存 ...
- 技巧收集-M1709
2017.09 在macOS中直接复制文件路径,在Finder中选中文件,按下快捷键:Command + Option + C *** 以KB,MB,GB方式显示文件大小 ls -lh 删除超大文本文 ...
- [UIKit学习]06.懒加载,模型,自定义代码段,重写构造方法
懒加载 在get中加载,且只加载一次 - (NSArray *)shops { if (_shops == nil) { NSString *file = [[NSBundle mainBundle] ...