Vue和Bootstrap的整合思路详解

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

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

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

使用vue-cli

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

rush:js;"> 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页面

rush:js;"> <Meta charset="utf-8"> nofollow" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> nofollow" integrity="sha384-rHyoN1irsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

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

2.创建布局

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

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

rush:js;">

添加script代码

rush:js;">

添加css样式

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

rush:js;">

修改router

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

rush:js;"> 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代码如下:

rush:js;">

以上所述是小编给大家介绍的Vue和Bootstrap的整合思路详解。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

原文地址：https://www.jb51.cc/bootstrap/38221.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。

• 上一篇：Bootstrap Table从零开始下一篇：JS 组件系列之Bootstrap Table的冻