在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 相关文章推荐
In Javascript Class, how to call the prototype method.(three method)
Jan 09 Javascript
jQuery 获取URL的GET参数值的小例子
Apr 18 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
Dec 12 Javascript
JavaScript设计模式之单例模式实例
Sep 24 Javascript
详谈javascript异步编程
Feb 21 Javascript
Angular中$cacheFactory的作用和用法实例详解
Aug 19 Javascript
jquery做个日期选择适用于手机端示例
Jan 10 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
Mar 09 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
Jun 19 Javascript
Vue源码解析之数据响应系统的使用
Apr 24 Javascript
Vue组件化开发之通用型弹出框的实现
Feb 28 Javascript
Vue左滑组件slider使用详解
Aug 21 Javascript
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
smarty基础之拼接字符串的详解
2013/06/18 PHP
有关于PHP中常见数据类型的汇总分享
2014/01/06 PHP
php约瑟夫问题解决关于处死犯人的算法
2015/03/23 PHP
老生常谈PHP数组函数array_merge(必看篇)
2017/05/25 PHP
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
2009/11/12 Javascript
js中关于String对象的replace使用详解
2011/05/24 Javascript
密码框显示提示文字jquery示例
2013/08/29 Javascript
jQuery中nextAll()方法用法实例
2015/01/07 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
2015/12/31 Javascript
Webwork 实现文件上传下载代码详解
2016/02/02 Javascript
javascript每日必学之基础入门
2016/02/16 Javascript
jQueryUI DatePicker 添加时分秒
2016/06/04 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
2016/06/25 Javascript
JavaScript模板引擎Template.js使用详解
2016/12/15 Javascript
nodejs根据ip数组在百度地图中进行定位
2017/03/06 NodeJs
Vue非父子组件通信详解
2017/06/12 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
2017/11/28 Javascript
webpack热模块替换(HMR)/热更新的方法
2018/04/05 Javascript
webstorm和.vue中es6语法报错的解决方法
2018/05/08 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
2019/04/30 Javascript
vue组件 keep-alive 和 transition 使用详解
2019/10/11 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
2020/11/07 Javascript
Python3安装Pymongo详细步骤
2017/05/26 Python
python3操作微信itchat实现发送图片
2018/02/24 Python
python+PyQT实现系统桌面时钟
2020/06/16 Python
Python:Numpy 求平均向量的实例
2019/06/29 Python
解决Django Static内容不能加载显示的问题
2019/07/28 Python
python 实现网易邮箱邮件阅读和删除的辅助小脚本
2021/03/01 Python
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
介绍JAVA 中的Collection FrameWork(及如何写自己的数据结构)
2014/10/31 面试题
老公给老婆的道歉信
2014/01/10 职场文书
王兆力在市委党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
群众路线四风对照检查材料
2014/11/04 职场文书
建筑质检员岗位职责
2015/04/08 职场文书
培训通知书模板
2015/04/17 职场文书