话题 首页 > Bootstrap教程 > Bootstrap教程话题列表 > 详情

如何在vuejs中使用bootstrap?

精华
初一扛把子 2016-10-19 10:35:55 浏览(5118) 回复(4) 赞(0)

使用vuejs重构代码,原来的代码是使用bootstrap+jquery开发的。不想重复的去写样式,所以想把原来的东西直接拿过来。但是再引入bootstrap的时候遇到了问题。

<script>
import jquery from '../../node_modules/jquery/dist/jquery.min.js'
import bootstrap from 'bootstrap'
export default {

}
</script>

在import进来的时候报错,
bootstrap

还有css用的less,如何同时引入bootstrap的css文件呢?


bootstrap

回答(4)

jing_cai 2016-10-19

使用bootstrap 还是 使用bootstrap css?

bootstrap分为css和js两个文件,其中css负责样式,js给按钮等组件填上响应事件。 所以光使用css只有一些基础样式。 那为什么不加载js呢?直接原因是其依赖于jquery。而在使用了vue作为数据绑定的情况下,jquery做的事情,vue都做得了,没必要引入jquery。引入jquery引起两套数据->UI控制,不太好。

其实less是一门css的预编译语言。(此定义未必准确) 缘起是这样的:

  1. 一个页面不宜加载太多的文件。这是因为每一个文件都得让浏览器去做http请求,下载,执行。下载1000个1k的文件跟下载1个1000k的文件比起来,通常耗时前者会比后者多1~2个数量级。
  2. 针对编程这件事而言,大规模项目总有模块化倾向。这是分治的原因,把大问题化成小问题,方便开发和重用。
  3. 所以我们需要一个工具,可以把大量碎片的css合成成一个css。同时,css在设计之初是面向ui的,编程能力太弱了,需要一个更强有力的语言。
  4. less是bootstrap3所采用的预编译器,此外还有bootstrap4采用的sass,和一个叫stylus的编译器(和语言)。less、sass、stylus都差不了太多。自行了解吧。
  5. 对于一个使用了webpack + vue的项目来说,如果不需要对bootstrap的总体样式进行调整,直接采用一个外链css就可以了,简单方便,本地node_modules中都不需要下载bootstrap。如果有样式调整,甚至更深入的开发,才有必要引入其使用的less。
一笔荒芜 2018-05-31

我也不清楚,坐等大神,火钳刘明!!!

1144100656 2018-05-31

这个领域不太懂!! 还是坐等大佬吧...

1152696398 2018-05-31

我也不清楚,坐等大神,火钳刘明!!!

要回复,请先登录 或者注册
二维码
建议反馈
APP下载