在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 相关文章推荐
node.js中的fs.rename方法使用说明
Dec 16 Javascript
使用npm发布Node.JS程序包教程
Mar 02 Javascript
jQuery实现鼠标划过修改样式的方法
Apr 14 Javascript
javascript正则表达式中的replace方法详解
Apr 20 Javascript
js实现圆盘记速表
Aug 03 Javascript
Vue2 使用 Echarts 创建图表实例代码
May 18 Javascript
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
vue-cli脚手架的安装教程图解
Sep 02 Javascript
详解小程序如何避免多次点击,重复触发事件
Apr 08 Javascript
微信小程序实现图片上传
May 23 Javascript
ElementUI Tag组件实现多标签生成的方法示例
Jul 08 Javascript
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
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
利用PHP动态生成VRML网页
2006/10/09 PHP
用PHP解决的一个栈的面试题
2014/07/02 PHP
PHP实现自动登入google play下载app report的方法
2014/09/23 PHP
分享PHP源码批量抓取远程网页图片并保存到本地的实现方法
2015/12/01 PHP
PHP中Array相关函数简介
2016/07/03 PHP
使用一个for循环将N*N的二维数组的所有值置1实现方法
2017/05/29 PHP
如何优雅的使用 laravel 的 validator验证方法
2018/11/11 PHP
PHP封装mysqli基于面向对象的mysql数据库操作类与用法示例
2019/02/25 PHP
ThinkPHP5.1框架页面跳转及修改跳转页面模版示例
2019/05/06 PHP
PHP 裁剪图片
2021/03/09 PHP
javascript 兼容FF的onmouseenter和onmouseleave的代码
2008/07/19 Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
jquery中$each()方法的使用指南
2015/04/30 Javascript
JavaScript中常见的字符串操作函数及用法汇总
2015/05/04 Javascript
JavaScript操作Cookie方法实例分析
2015/05/27 Javascript
jQuery实现鼠标滑过点击事件音效试听
2015/08/31 Javascript
基于jquery编写分页插件
2016/03/07 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
2016/04/08 Javascript
Bootstrap入门教程一Hello Bootstrap初识
2017/03/02 Javascript
整理关于Bootstrap警示框的慕课笔记
2017/03/29 Javascript
vue2.0实现分页组件的实例代码
2017/06/22 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
layui switch 开关监听 弹出确定状态转换的例子
2019/09/21 Javascript
vue+iview实现文件上传
2020/11/17 Vue.js
详解Vue3 Teleport 的实践及原理
2020/12/02 Vue.js
在服务器端实现无间断部署Python应用的教程
2015/04/16 Python
python enumerate函数的使用方法总结
2017/11/15 Python
np.dot()函数的用法详解
2020/01/17 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
Nicole Miller官方网站:纽约女装品牌
2019/09/14 全球购物
土地转让协议书
2014/04/15 职场文书
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
终止合同协议书范本
2016/03/22 职场文书
Linux安装Nginx步骤详解
2021/03/31 Servers
Nginx 502 bad gateway错误解决的九种方案及原因
2022/08/14 Servers