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的整合思路详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com