在vue中使用Autoprefixed的方法


Posted in Javascript onJuly 27, 2018

为了使我们的项目兼容各种浏览器,我们可能会在开发中写大量的前缀。即使有了IDE为我们提供了边界的方式。但是仍然需要我们去花时间和精力。而这样会浪费我们很多的时间。为了在开发中提升团队的开发效率,并且同时节省时间,我们引入了autoprefixed。搭配webpack使用,在每次打包的时候自动的给我们的样式加上前缀来兼容不同的浏览器。

安装依赖包

如果你是使用vue-cli构建的项目。首先执行以下代码安装依赖包。

npm install autoprefixer postcss postcss-loader -D

修改vue-loader配置文件

修改目录/build/vue-loader.conf.js文件。文件的原本代码应该如下。

module.exports = {
 loaders: utils.cssLoaders({
  sourceMap: isProduction
   ? config[buildEnv].productionSourceMap
   : config.dev.cssSourceMap,
  extract: isProduction
 })
}

将以上代码,替换成如下代码。

module.exports = {
 loaders: utils.cssLoaders({
  sourceMap: isProduction
   ? config[buildEnv].productionSourceMap
   : config.dev.cssSourceMap,
  extract: isProduction
 }),
 postcss: [require('autoprefixer')({browsers: ['last 10 Chrome versions', 'last 5 Firefox versions', 'Safari >= 6', 'ie > 8']})]
}

修改utils

打开/build/utils.js,定位到如下代码。

postcss: generateLoaders()

将上面的代码更改为如下代码。

postcss: generateLoaders(['css?-autoprefixer'])

重新启动项目,就可以通过chrome的开发者工具,可以看到编译后的css文件,会自动的加上兼容性的前缀。就可以放心的写css代码了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用apply方法处理数组的三个技巧[译]
Sep 20 Javascript
详解Angularjs中的依赖注入
Mar 11 Javascript
浅析angularJS中的ui-router和ng-grid模块
May 20 Javascript
jquery 抽奖小程序实现代码
Oct 12 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
Oct 19 Javascript
jquery easyui validatebox remote的使用详解
Nov 09 Javascript
详解Angular2中Input和Output用法及示例
May 21 Javascript
Vue中组件之间数据的传递的示例代码
Sep 08 Javascript
AngularJS监听ng-repeat渲染完成的方法
Mar 20 Javascript
vue组件实践之可搜索下拉框功能
Nov 25 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
Sep 06 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
Jul 27 #Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
Jul 26 #Javascript
Vue头像处理方案小结
Jul 26 #Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
Jul 26 #Javascript
vue router 配置路由的方法
Jul 26 #Javascript
vue+webpack模拟后台数据的示例代码
Jul 26 #Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
Jul 26 #Javascript
You might like
PHPMailer邮件类利用smtp.163.com发送邮件方法
2008/09/11 PHP
php面向对象全攻略 (十五) 多态的应用
2009/09/30 PHP
php中长文章分页显示实现代码
2012/09/29 PHP
laravel批量生成假数据的方法
2019/10/09 PHP
Vagrant(WSL)+PHPStorm+Xdebu 断点调试环境搭建
2019/12/13 PHP
js时间戳格式化成日期格式的多种方法
2013/11/11 Javascript
jQuery插件boxScroll实现图片轮播特效
2015/07/14 Javascript
Angular的$http的ajax的请求操作(推荐)
2017/01/10 Javascript
js中document.referrer实现移动端返回上一页
2017/02/22 Javascript
微信小程序 setData的使用方法详解
2017/04/20 Javascript
Node.js pipe实现源码解析
2017/08/12 Javascript
BootStrap入门学习第一篇
2017/08/28 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
2018/09/14 Javascript
vue2和vue3的v-if与v-for优先级对比学习
2020/10/10 Javascript
Vue实现简单计算器
2021/01/20 Vue.js
Python常用随机数与随机字符串方法实例
2015/04/09 Python
基python实现多线程网页爬虫
2015/09/06 Python
python dict.get()和dict['key']的区别详解
2016/06/30 Python
django1.8使用表单上传文件的实现方法
2016/11/04 Python
Python对列表中的各项进行关联详解
2017/08/15 Python
TF-IDF与余弦相似性的应用(二) 找出相似文章
2017/12/21 Python
浅谈numpy库的常用基本操作方法
2018/01/09 Python
pycharm创建一个python包方法图解
2019/04/10 Python
python实现微信定时每天和女友发送消息
2019/04/29 Python
美国眼镜网:GlassesUSA
2017/09/07 全球购物
斯巴达比赛商店:Spartan Race
2019/01/08 全球购物
专科毕业生就业推荐信
2013/11/01 职场文书
数据管理员的自我评价分享
2013/11/15 职场文书
小学生作文评语大全
2014/04/21 职场文书
求职信范文怎么写
2015/03/19 职场文书
2015年社区服务活动总结
2015/03/25 职场文书
小学感恩主题班会
2015/08/12 职场文书
公司管理建议书
2015/09/14 职场文书
python利用pandas分析学生期末成绩实例代码
2021/07/09 Python
详细介绍Java中的CyclicBarrier
2022/04/13 Java/Android
Mysql 一主多从的部署
2022/05/20 MySQL