Vue和Bootstrap的整合思路详解


Posted in Javascript onJune 30, 2017

ldlood同学推荐 element ui(饿了么基于vue出品)也不错, github地址:https://github.com/ElemeFE/element. 大家也可以关注一下

我是一个刚刚接触前端开发的新手,所以有必要记录如何将Bootstrap和Vue进行整合。 如果你是老手,请直接绕道而过。作为一个新手,里面的步骤,过程或者专业术语未必正确,如果你发现哪里错误了,请发邮件至ztao8607@gmail.com

Vue官方不建议新手直接使用vue-cli,但我不这么看。 先使用cli跳过繁琐的环境配置,直接看到demo效果能增强点自信心。如果上手就被一大堆的环境配置搞乱了心情,那才是得不偿失呢。 恩. 至少我是这么认为的。

使用vue-cli

如果是使用国内网络安装,官方建议使用淘宝或者cnpmjs的镜像。我感觉淘宝的镜像速度不如cnpmjs的快,因为我使用的cnpmjs镜像。

npm --registry http://r.cnpmjs.org install --global vue-cli //安装vue-cli
vue init webpack <project name> //创建项目,一般情况使用默认配置就可以
cd <project name>
npm --registry http://r.cnpmjs.org install //安装package
npm run dev

正常的话,你应该能看到一个vue的初始化页面。

整合bootstrap

你可以选择下载bootstrap zip包,然后将包里面的内容放到工程的static目录中。也可以选择使用bootstrap cdn资源,我建议使用cdn资源。

1.修改index.html页面

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>testproject</title>
  <!-- 将bootstrap cdn url放到这里 -->
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="external nofollow" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>
</html>

你可以访问bootstrap官方网站获取到最新的cdn资源地址。

2.创建布局

我们创建一个使用bootstrap 栅格布局的例子。 在src/components目录中创建一个Root.vue文件。在Root.vue文件中,我们先编辑template,创建一个container,然后放入一些导航栏。

里面布局代码来自于bootstrap官方提供的demo

<template>
 <div id="root">
  <div class="container">
    <div class="masthead">
      <h3 class="text-muted">Look for it!</h3>
      <nav>
      <ul class="nav nav-justified">
        <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Home</a></li>
        <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Projects</a></li>
        <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Services</a></li>
        <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Downloads</a></li>
        <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >About</a></li>
        <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Contact</a></li>
      </ul>
      </nav>
    </div>
  </div>
  <mfooter></mfooter>
 </div>
</template>

添加script代码

<script>
export default {
 name: 'root'
}
</script>

添加css样式

因为是从bootstrap拷贝的css样式,所以直接将css拷贝过来。

<style>
body {
 padding-top: 20px;
}
.footer {
 padding-top: 40px;
 padding-bottom: 40px;
 margin-top: 40px;
 border-top: 1px solid #eee;
}
/* Main marketing message and sign up button */
.jumbotron {
 text-align: center;
 background-color: transparent;
}
.jumbotron .btn {
 padding: 14px 24px;
 font-size: 21px;
}
/* Customize the nav-justified links to be fill the entire space of the .navbar */
.nav-justified {
 background-color: #eee;
 border: 1px solid #ccc;
 border-radius: 5px;
}
.nav-justified > li > a {
 padding-top: 15px;
 padding-bottom: 15px;
 margin-bottom: 0;
 font-weight: bold;
 color: #777;
 text-align: center;
 background-color: #e5e5e5; /* Old browsers */
 background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5));
 background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
 background-image:   -o-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
 background-image:     linear-gradient(to bottom, #f5f5f5 0%,#e5e5e5 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
 background-repeat: repeat-x; /* Repeat the gradient */
 border-bottom: 1px solid #d5d5d5;
}
.nav-justified > .active > a,
.nav-justified > .active > a:hover,
.nav-justified > .active > a:focus {
 background-color: #ddd;
 background-image: none;
 -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
     box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
}
.nav-justified > li:first-child > a {
 border-radius: 5px 5px 0 0;
}
.nav-justified > li:last-child > a {
 border-bottom: 0;
 border-radius: 0 0 5px 5px;
}
@media (min-width: 768px) {
 .nav-justified {
  max-height: 52px;
 }
 .nav-justified > li > a {
  border-right: 1px solid #d5d5d5;
  border-left: 1px solid #fff;
 }
 .nav-justified > li:first-child > a {
  border-left: 0;
  border-radius: 5px 0 0 5px;
 }
 .nav-justified > li:last-child > a {
  border-right: 0;
  border-radius: 0 5px 5px 0;
 }
}
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
 /* Remove the padding we set earlier */
 .masthead,
 .marketing,
 .footer {
  padding-right: 0;
  padding-left: 0;
 }
}
</style>

修改router

注释原先的Hello模块,使用刚才添加的Root模块

import Vue from 'vue'
import Router from 'vue-router'
import Root from '@/components/Root'
Vue.use(Router)
export default new Router({
 routes: [
  {
   path: '/',
   name: 'Header',
   component: Root
  }
 ]
})

完整的Root.vue代码如下:

<template>
 <div id="root">
  <div class="container">
    <div class="masthead">
      <h3 class="text-muted">Look for it!</h3>
      <nav>
      <ul class="nav nav-justified">
        <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Home</a></li>
        <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Projects</a></li>
        <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Services</a></li>
        <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Downloads</a></li>
        <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >About</a></li>
        <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Contact</a></li>
      </ul>
      </nav>
    </div>
  </div>
 </div>
</template>
<script>
export default {
 name: 'root'
}
</script>
<style>
body {
 padding-top: 20px;
}
.footer {
 padding-top: 40px;
 padding-bottom: 40px;
 margin-top: 40px;
 border-top: 1px solid #eee;
}
/* Main marketing message and sign up button */
.jumbotron {
 text-align: center;
 background-color: transparent;
}
.jumbotron .btn {
 padding: 14px 24px;
 font-size: 21px;
}
/* Customize the nav-justified links to be fill the entire space of the .navbar */
.nav-justified {
 background-color: #eee;
 border: 1px solid #ccc;
 border-radius: 5px;
}
.nav-justified > li > a {
 padding-top: 15px;
 padding-bottom: 15px;
 margin-bottom: 0;
 font-weight: bold;
 color: #777;
 text-align: center;
 background-color: #e5e5e5; /* Old browsers */
 background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5));
 background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
 background-image:   -o-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
 background-image:     linear-gradient(to bottom, #f5f5f5 0%,#e5e5e5 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
 background-repeat: repeat-x; /* Repeat the gradient */
 border-bottom: 1px solid #d5d5d5;
}
.nav-justified > .active > a,
.nav-justified > .active > a:hover,
.nav-justified > .active > a:focus {
 background-color: #ddd;
 background-image: none;
 -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
     box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
}
.nav-justified > li:first-child > a {
 border-radius: 5px 5px 0 0;
}
.nav-justified > li:last-child > a {
 border-bottom: 0;
 border-radius: 0 0 5px 5px;
}
@media (min-width: 768px) {
 .nav-justified {
  max-height: 52px;
 }
 .nav-justified > li > a {
  border-right: 1px solid #d5d5d5;
  border-left: 1px solid #fff;
 }
 .nav-justified > li:first-child > a {
  border-left: 0;
  border-radius: 5px 0 0 5px;
 }
 .nav-justified > li:last-child > a {
  border-right: 0;
  border-radius: 0 5px 5px 0;
 }
}
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
 /* Remove the padding we set earlier */
 .masthead,
 .marketing,
 .footer {
  padding-right: 0;
  padding-left: 0;
 }
}
</style>

以上所述是小编给大家介绍的Vue和Bootstrap的整合思路详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScipt基本教程之JavaScript语言的基础
Jan 16 Javascript
基于jquery的让textarea自适应高度的插件
Aug 03 Javascript
javascript不可用的问题探究
Oct 01 Javascript
详解AngularJS中module模块的导入导出
Dec 10 Javascript
JavaScript电子时钟倒计时
Jan 09 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
Jan 04 Javascript
C#微信小程序服务端获取用户解密信息实例代码
Mar 10 Javascript
基于jquery实现多选下拉列表
Aug 02 jQuery
基于vue+axios+lrz.js微信端图片压缩上传方法
Jun 25 Javascript
基于JavaScript实现留言板功能
Mar 16 Javascript
JavaScript运动原理基础知识详解
Apr 02 Javascript
node koa2 ssr项目搭建的方法步骤
Dec 11 Javascript
JavaScript原型继承_动力节点Java学院整理
Jun 30 #Javascript
JavaScript之排序函数_动力节点Java学院整理
Jun 30 #Javascript
JavaScript操作文件_动力节点Java学院整理
Jun 30 #Javascript
JavaScript之生成器_动力节点Java学院整理
Jun 30 #Javascript
详解vue组件通信的三种方式
Jun 30 #Javascript
JavaScript实现瀑布流图片效果
Jun 30 #Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
Jun 30 #Javascript
You might like
PHP中for循环语句的几种变型
2006/11/26 PHP
PHP 数组实例说明
2008/08/18 PHP
PHP GD 图像处理组件的常用函数总结
2010/04/28 PHP
用sql命令修改数据表中的一个字段为非空(not null)的语句
2010/06/04 PHP
给PHP开发者的编程指南 第一部分降低复杂程度
2016/01/18 PHP
javascript showModalDialog,open取得父窗口的方法
2010/03/10 Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
2011/03/25 Javascript
jQuery如何取id有.的值一般的方法是取不到的
2014/04/18 Javascript
javascript Deferred和递归次数限制实例
2014/10/21 Javascript
Javascript 构造函数详解
2014/10/22 Javascript
轻松学习Javascript闭包函数
2015/12/15 Javascript
基于jquery实现轮播特效
2016/04/22 Javascript
jQuery的ajax和遍历数组json实例代码
2016/08/01 Javascript
AngularJS入门教程之表单校验用法示例
2016/11/02 Javascript
iscroll动态加载数据完美解决方法
2017/07/18 Javascript
react-router browserHistory刷新页面404问题解决方法
2017/12/29 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
2018/12/20 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
2019/04/10 jQuery
微信小程序webview 脚手架使用详解
2019/07/22 Javascript
nodejs实现的http、https 请求封装操作示例
2020/02/06 NodeJs
可拖拽组件slider.js使用方法详解
2020/12/04 Javascript
Python批处理更改文件名os.rename的方法
2018/10/26 Python
Python matplotlib通过plt.scatter画空心圆标记出特定的点方法
2018/12/13 Python
Python中按值来获取指定的键
2019/03/04 Python
python中的print()输出
2019/04/12 Python
Ubuntu18.04安装 PyCharm并使用 Anaconda 管理的Python环境
2020/04/08 Python
Python转换字典成为对象,可以用&quot;.&quot;方式访问对象属性实例
2020/05/11 Python
django 数据库 get_or_create函数返回值是tuple的问题
2020/05/15 Python
Python 中如何写注释
2020/08/28 Python
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
茵宝(Umbro)英国官方商店:英国足球服装生产商
2016/12/29 全球购物
有750多个顶级品牌的瑞士时尚在线:ABOUT YOU
2017/01/04 全球购物
欧洲第一的摇滚和金属乐队服装网站:EMP
2017/10/26 全球购物
销售行政专员职责
2014/01/03 职场文书
家居饰品店创业计划书
2014/01/31 职场文书
2014酒店客房部工作总结
2014/12/16 职场文书