Vue和Bootstrap的整合思路详解

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页面

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。