Vue和Bootstrap的整合思路详解

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  //创建项目，一般情况使用默认配置就可以
cd 
npm --registry http://r.cnpmjs.org install //安装package
npm run dev 

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

整合bootstrap

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

1.修改index.html页面

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

2.创建布局

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

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

添加script代码

添加css样式

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

修改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代码如下:

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