扫码关注官方订阅号
使用vuejs重构代码,原来的代码是使用bootstrap+jquery开发的。不想重复的去写样式,所以想把原来的东西直接拿过来。但是再引入bootstrap的时候遇到了问题。
在import进来的时候报错,
还有css用的less,如何同时引入bootstrap的css文件呢?
人生最曼妙的风景,竟是内心的淡定与从容!
bootstrap分为css和js两个文件,其中css负责样式,js给按钮等组件填上响应事件。所以光使用css只有一些基础样式。那为什么不加载js呢?直接原因是其依赖于jquery。而在使用了vue作为数据绑定的情况下,jquery做的事情,vue都做得了,没必要引入jquery。引入jquery引起两套数据->UI控制,不太好。
@limichange 提到的 http://yuche.github.io/vue-strap/这是一个yuche大哥做的bootstrap封装。其原理是引入bootstrap的css,然后做了许多vue组件,通过class通知样式。风格跟bootstrap比较统一。我们公司使用这个库做的前端ui。不过平心而论,这个库的更新能力比较弱,作者比较不干事。有些bug和功能都没有得到完成。
除了vue-strap还有许多新的库能用呢!在这里https://github.com/vuejs/awesome-vue找找
比如vux https://github.com/airyland/vux是基于微信weui的组件库比如http://morgul.github.io/vueboot/ 什么的。
好像awesome-vue里还有其他基于bootstrap样式的vue组件库。
其实less是一门css的预编译语言。(此定义未必准确)缘起是这样的:
一个页面不宜加载太多的文件。这是因为每一个文件都得让浏览器去做http请求,下载,执行。下载1000个1k的文件跟下载1个1000k的文件比起来,通常耗时前者会比后者多1~2个数量级。
针对编程这件事而言,大规模项目总有模块化倾向。这是分治的原因,把大问题化成小问题,方便开发和重用。
所以我们需要一个工具,可以把大量碎片的css合成成一个css。同时,css在设计之初是面向ui的,编程能力太弱了,需要一个更强有力的语言。
less是bootstrap3所采用的预编译器,此外还有bootstrap4采用的sass,和一个叫stylus的编译器(和语言)。less、sass、stylus都差不了太多。自行了解吧。
对于一个使用了webpack + vue的项目来说,如果不需要对bootstrap的总体样式进行调整,直接采用一个外链css就可以了,简单方便,本地node_modules中都不需要下载bootstrap。如果有样式调整,甚至更深入的开发,才有必要引入其使用的less。
你应该用这个的http://yuche.github.io/vue-strap/。已经有人封装好了。
我是这么做的:
webpack.config.js
var webpack = require('webpack'); module.exports = { // ... entry: { // ... vendor: [ 'jquery', 'tether', 'bootstrap/dist/js/bootstrap.min.js' ] }, plugins: [ new webpack.ProvidePlugin({ jQuery: "jquery", 'window.Tether': 'tether' }), new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js', Infinity) ] }
index.html 适当位置加入
<script type="text/javascript" src="path/to/vendor.bundle.js"></script>
刚从这个坑里爬出来,希望对你有帮助
import jQuery from 'jquery';
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
使用bootstrap 还是 使用bootstrap css
bootstrap分为css和js两个文件,其中css负责样式,js给按钮等组件填上响应事件。
所以光使用css只有一些基础样式。
那为什么不加载js呢?直接原因是其依赖于jquery。而在使用了vue作为数据绑定的情况下,jquery做的事情,vue都做得了,没必要引入jquery。引入jquery引起两套数据->UI控制,不太好。
不用jquery怎么使用bootstrap的高级功能
@limichange 提到的 http://yuche.github.io/vue-strap/
这是一个yuche大哥做的bootstrap封装。其原理是引入bootstrap的css,然后做了许多vue组件,通过class通知样式。风格跟bootstrap比较统一。
我们公司使用这个库做的前端ui。
不过平心而论,这个库的更新能力比较弱,作者比较不干事。有些bug和功能都没有得到完成。
除了vue-strap还有许多新的库能用呢!
在这里https://github.com/vuejs/awesome-vue
找找
比如vux https://github.com/airyland/vux
是基于微信weui的组件库
比如http://morgul.github.io/vueboot/ 什么的。
好像awesome-vue里还有其他基于bootstrap样式的vue组件库。
css or less
其实less是一门css的预编译语言。(此定义未必准确)
缘起是这样的:
一个页面不宜加载太多的文件。这是因为每一个文件都得让浏览器去做http请求,下载,执行。下载1000个1k的文件跟下载1个1000k的文件比起来,通常耗时前者会比后者多1~2个数量级。
针对编程这件事而言,大规模项目总有模块化倾向。这是分治的原因,把大问题化成小问题,方便开发和重用。
所以我们需要一个工具,可以把大量碎片的css合成成一个css。同时,css在设计之初是面向ui的,编程能力太弱了,需要一个更强有力的语言。
less是bootstrap3所采用的预编译器,此外还有bootstrap4采用的sass,和一个叫stylus的编译器(和语言)。less、sass、stylus都差不了太多。自行了解吧。
对于一个使用了webpack + vue的项目来说,如果不需要对bootstrap的总体样式进行调整,直接采用一个外链css就可以了,简单方便,本地node_modules中都不需要下载bootstrap。如果有样式调整,甚至更深入的开发,才有必要引入其使用的less。
你应该用这个的http://yuche.github.io/vue-strap/。已经有人封装好了。
我是这么做的:
webpack.config.js
index.html 适当位置加入
刚从这个坑里爬出来,希望对你有帮助
import jQuery from 'jquery';