vue-cli+webpack在生成的项目中使用bootstrap
在一个html页面中加入bootstrap是很方便,就是一般的将css和js文件通过Link和Script标签就行。
那么在一个用vue-vli生成的前端项目中如何加入?因为框架不一样了,略微要适应一下。
脚手架生成项目
执行命令用webpack模板生成一个名为vuestrap的项目(名字任意)
vue init webpack vuestrap
在出现的各提示选项中,没什么要求,为了方便,把不用的ESLint,unit tests,e2e都关掉(这些选项都随意)。
? Project name vuestrap
? Project description A Vue.js project
? Author 省略
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No
选项选完,项目也就生成了。
执行命令,安装脚手架创建的组件
npm install
安装jquery
bootstrap是依赖jquery的,所以就先装上jquery,这里用的版本是1.11.3。
稍后在配置的时候,是以webpack插件的方式进行打包,所以这里直接用npm进行安装,因为插件方式打包的组件都是require进来的。
执行命令,并保存到package.json中
npm install jquery@1.11.3 --save-dev
注:如果想查看npm上jquery有哪些版本,可以执行命令:
npm view jquery versions
下载和安置bootstrap所需的文件
下载bootstrap包,这里用的版本是3.3.0。
下载下来后将fonts,js,css文件夹分别放到项目目录/src/assets下。
配置jquery
将jquery以插件打包,需要为webpack的plugins进行插件设置。
在build/webpack.base.conf.js文件中,在整个配置对象的末尾增加plugins配置。
在webpack.base.conf.js中的配置项,可以在dev和build出来的pro版本中都有效。
下面的配置其实就是变量名的真正指向设置,这样,在页面中对jquery的各种名字的调用就会有效,否则bootstrap跑不起来。
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"windows.jQuery": "jquery"
})
]
引用bootstrap
在src/main.js文件的顶部加入如下对bootstrap主要文件的引用。
import './assets/css/bootstrap.min.css'
import './assets/js/bootstrap.min'
做完这个,也就配完了。
接下去试试看能不能用,就写个简单的页面。
配置bootstrap
因为bootstrap除了js和css文件外,还有字体文件需要一并打包,默认生成的webpack.base.conf.js中的moudle->rules设定中都已经包含对字体文件的打包设置,所以无需修改,很人性啊。
验证页面
就在App.vue中写一个页面,放一个panel,button,modal。
<template>
<div id="app">
<div class='container'>
<div class='row'>
<div class='col-lg-4'>
<h1>demo</h1>
</div> <div class='col-lg-8'>
<div class='panel panel-default' style='min-width:500px;box-shadow:4px 4px 10px #888888;'>
<div class="panel-heading">
<button id='btnCreate'>
<span class="glyphicon glyphicon-plus"></span>
</button>
<span> </span>
</div>
<div class="panel-body">
<div style='float: left;width:100%'> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button> <!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div> </div>
</div>
</div>
</div> </div>
</div>
</div>
</template> <script>
export default {
name: 'app'
}
</script> <style>
#app {
margin-top: 60px;
}
</style>
写完后,执行命令,运行效果。
npm run dev
效果:
点击按钮,可以打开modal。
End
vue-cli+webpack在生成的项目中使用bootstrap的更多相关文章
- vue-cli+webpack在生成的项目中使用bootstrap方法(二)
vue-cli+webpack在生成的项目中使用bootstrap方法(一)中,是通过手动下载bootstrap库,然后手动添加到src/assets中,显然是过程太多. 当然是可以更省力些,可以通过 ...
- vue-cli+webpack在生成的项目中使用bootstrap的方法
在一个html页面中加入bootstrap是很方便,就是一般的将css和js文件通过Link和Script标签就行.那么在一个用vue-vli生成的前端项目中如何加入?因为框架不一样了,略微要适应一下 ...
- vue-cli+webpack在生成的项目中使用bootstrap方法(一)
在一个html页面中加入bootstrap是很方便,就是一般的将css和js文件通过Link和Script标签就行. 那么在一个用vue-vli生成的前端项目中如何加入?因为框架不一样了,略微要适应一 ...
- 在使用vue+webpack模版创建的项目中使用font-awesome
前言:最近使用vue+webpack进行一个小项目的开发,按照官方模版文档完成项目初始化后打算引入ont-awesome字体图标库进行使用,引入过程中遇到一些问题并解决,现记录如下. 一开始进展很顺利 ...
- [Vue 牛刀小试]:第十七章 - 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍
一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习 ...
- 前端学习笔记系列一:10整体移动vscode代码块、VSCode 使用 stylus,配置格式化设置、在vue项目中引入bootstrap
1.整体移动vscode代码块 凭借操作的经验我们能够轻松地知道将代码整体往右移只需选中代码按Tab键即可.其实往左移也很简单: 选中之后按下 shift+Tab键 即可. 2.VSCode 使用 s ...
- 在 React项目中使用 bootstrap
在使用create-react-app 创建的项目中使用 bootstrap; 安装react-bootstrap; npm install react-bootstrap --savenpm ins ...
- Vue CLI Webpack 创建Vue项目
简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还 ...
- vue cli 3.0快速创建项目
本地安装vue-cli 前置条件 更新npm到最新版本 命令行运行: npm install -g npmnpm就自动为我们更新到最新版本 淘宝npm镜像使用方法 npm config set reg ...
随机推荐
- POST与GET
面试如果被问到这个问题,相信很多人都是会心一笑,答案随口而来: 1.GET在浏览器回退时是无害的,而POST会再次提交请求. 2.GET请求会被浏览器主动cache,而POST不会,除非手动设置. 3 ...
- 1101: 零起点学算法08——简单的输入和计算(a+b)
1101: 零起点学算法08--简单的输入和计算(a+b) Time Limit: 1 Sec Memory Limit: 128 MB 64bit IO Format: %lldSubmitt ...
- Linux Smaba服务器配置
Linux系统默认已经安装了Samba,但是没有安装Samba服务: 1,先查看安装情况:rpm -qa|grep samba 根据系统的安装情况选择下载或者通过光驱安装所缺的rpm包. 我的安装情况 ...
- 24(java_io from keyboard)
public class ReadFromKB{ public static void main(String args[]) { try { byte bArray[]=new byte[128]; ...
- python去除文本中的HTML标签
def SplitHtmlTag(file): with open(file,"r") as f,open("result.txt","w+" ...
- 如何了解您的微软认证情况和MIC ID
- Html 经典布局(一)
经典布局案例(一): <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- CSS选择器渲染效率
1 浏览器如何识别你的选择器 首先我们需要清楚,浏览器是如何读取选择器,以识别样式,并将相应的样式附于对应的HTML元素,达到美化页面的效果.Chris Coyier曾在<Efficiently ...
- wow.js中各种特效对应的类名
一.(页面在向下滚动的时候,有些元素会产生细小的动画效果.虽然动画比较小,但却能吸引你的注意.) 刚知道wow.js这个插件,之前访问别的网站下拉滚动条会出现各种效果感觉特别神奇,现在自己依葫芦画瓢也 ...
- java集合框架(hashSet自定义元素是否相同,重写hashCode和equals方法)
/*HashSet 基本操作 * --set:元素是无序的,存入和取出顺序不一致,元素不可以重复 * (通过哈希值来判断是否是同一个对象) * ----HashSet:底层数据结构是哈希表, * 保证 ...