Vue和Bootstrap的整合思路详解
在JavaScript开发中,通常会使用jQuery和bootstrap作为管理背景,而我们在登录接口的节点服务器中运行都是由spring MVC实现的,相信爱站技术频道的介绍可以给大家带来一些参考。
我是一个刚刚接触前端开发的新手,所以有必要记录如何将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页面
testproject
你可以访问bootstrap官方网站获取到最新的cdn资源地址。
2.创建布局
我们创建一个使用bootstrap 栅格布局的例子。 在src/components目录中创建一个Root.vue文件。在Root.vue文件中,我们先编辑template,创建一个container,然后放入一些导航栏。
里面布局代码来自于bootstrap官方提供的demo
Look for it!
添加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代码如下:
Look for it!
以上就是爱站技术频道小编为大家带来的Vue和Bootstrap的整合思路详解,如果大家还有什么问题,可以直接来js.aizhan.com进行了解。