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 ...
- 项目中常用js方法整理common.js
抽空把项目中常用js方法整理成了common.js,都是网上搜集而来的,大家一起分享吧. var h = {}; h.get = function (url, data, ok, error) { $ ...
- vue不通过路由直接获取url中参数的方法示例
vue不通过路由直接获取url中参数的方法示例 vuejs取得URL中参数的值地址:http://localhost:3333/#/index?id=128console.log(this.$rout ...
- 在 React项目中使用 bootstrap
在使用create-react-app 创建的项目中使用 bootstrap; 安装react-bootstrap; npm install react-bootstrap --savenpm ins ...
随机推荐
- Linux-配置虚拟IP
Linux下配置网卡ip别名何谓ip别名?用windows的话说,就是为一个网卡配置多个ip.什么场合增加ip别名能派上用场?布网需要.多ip访问测试.特定软件对多ip的需要...and so on. ...
- Linux内核的ioctl函数学习
Linux内核的ioctl函数学习 来源:Linux公社 作者:Linux 我这里说的ioctl函数是在驱动程序里的,因为我不知道还有没有别的场合用到了ioctl, 所以就规定了我们讨论的范围.为什 ...
- memcached全面剖析--3.memcached的删除机制和发展方向
下面是<memcached全面剖析>的第三部分. 发表日:2008/7/16 作者:前坂徹(Toru Maesaka) 原文链接:http://gihyo.jp/dev/feature/0 ...
- kickstart命令选项
下面的选项可以放入kickstart文件.如果喜欢使用图形化的界面来创建kickstart文件,可以使用"Kickstart配置"应用程序.(注:如果某选项后面跟随了一个等号(=) ...
- 系统服务中没有Windows Installer服务怎么办
在安装软件时,发现安装不了,提示没有Windows Installer服务,到系统服务中一看,果真没有这一项,这是什么问题呢? 出现这种情况,多为与Windows Installer服务相关的文件丢失 ...
- C# WinForm给Button或其它控件添加快捷键响应
今天做东西遇到要给按钮添加快捷键.就在这介绍三种添加快捷键的方式. 第一种Alt + *(按钮快捷键) 在大家给button.label.menuStrip等控件设置Text属性时在名字后边加& ...
- 【Struts2】SSH如何返回JSON数据
在开发中我们经常遇到客户端和后台数据的交互,使用比较多的就是json格式了.在这里以简单的Demo总结两种ssh返回Json格式的数据 项目目录如下 主要是看 上图选择的部分 WebRoot里面就 ...
- 【JQuery】事件冒泡及使用jQuery阻止
(1)什么是事件起泡 首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生. 当事件发生后,这个事件就要开始传播.为什么要传播呢 ...
- ASP.NET Core之项目文件简介及配置文件与IOC的使用
原文地址:https://www.cnblogs.com/knowledgesea/p/7079880.html 序言 在当前编程语言蓬勃发展与竞争的时期,对于我们.net从业者来说,.Net Cor ...
- 解决『Manifest merger failed with multiple errors, see 』
Error:Execution failed for task ':app:processDebugManifest'.> Manifest merger failed with multipl ...