Vue和Bootstrap的整合思路详解

这篇文章主要介绍了Vue和Bootstrap的整合思路详解,需要的朋友可以参考下

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

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

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

使用vue-cli

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

npm --registry install --global vue-cli //安装vue-cli vue init webpack //创建项目,一般情况使用默认配置就可以 cd npm --registry install //安装package npm run dev

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

整合bootstrap

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

1.修改index.html页面

Vue和Bootstrap的整合思路详解-12346知识网 28108333.com yangboen.com sokidc.com npygk.com mdjbfwy.com alljaa.com 0551buy.com szbxg158.com wxwdm.com

你可以访问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代码如下:

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

以上就是Vue和Bootstrap的整合思路详解的详细内容,更多请关注luxessed.com其它相关文章!

声明:有的资源来自网络转载,版权归原作者所有,如有侵犯到您的权益 请一个月内联系我们,我们将配合处理!

原文地址:Vue和Bootstrap的整合思路详解发布于2022-11-18 12:32:01