在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 相关文章推荐
指定js可访问其它域名的cookie的方法
Sep 18 Javascript
jquery miniui 教程 表格控件 合并单元格应用
Nov 25 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
Mar 26 Javascript
防止登录页面出现在frame中js代码
Jul 22 Javascript
JavaScript常用脚本汇总(一)
Mar 04 Javascript
总结几道关于Node.js的面试问题
Jan 11 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
Angular 容器部署的方法
Apr 17 Javascript
在vscode里使用.vue代码模板的方法
Apr 28 Javascript
Webpack path与publicPath的区别详解
May 03 Javascript
vue实现输入一位数字转汉字功能
Dec 13 Javascript
基于原生js实现九宫格算法代码实例
Jul 03 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
PHP模拟asp.net的StringBuilder类实现方法
2015/08/08 PHP
laravel学习教程之关联模型
2016/07/30 PHP
Yii2语言国际化自动配置详解
2018/08/22 PHP
JavaScript的目的分析
2007/01/05 Javascript
告诉大家什么是JSON
2008/06/10 Javascript
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
javascript使用isNaN()函数判断变量是否为数字
2013/09/21 Javascript
javaScript的函数对象的声明详解
2015/02/06 Javascript
纯JavaScript代码实现文本比较工具
2016/02/17 Javascript
vue.js配合$.post从后台获取数据简单demo分享
2018/08/11 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
2020/04/04 jQuery
vue+Element-ui实现登录注册表单
2020/11/17 Javascript
[01:03:38]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS CIS
2014/05/22 DOTA
[03:37]2014DOTA2国际邀请赛 主赛事第一日胜者组TOPPLAY
2014/07/19 DOTA
Tensorflow卷积神经网络实例进阶
2018/05/24 Python
解决python os.mkdir创建目录失败的问题
2018/10/16 Python
pandas的连接函数concat()函数的具体使用方法
2019/07/09 Python
python获取Pandas列名的几种方法
2019/08/07 Python
利用python list完成最简单的DB连接池方法
2019/08/09 Python
Python 类方法和实例方法(@classmethod),静态方法(@staticmethod)原理与用法分析
2019/09/20 Python
Tensorflow 多线程与多进程数据加载实例
2020/02/05 Python
python如何代码集体右移
2020/07/20 Python
python爬虫爬取网页数据并解析数据
2020/09/18 Python
写一个方法1000的阶乘
2012/11/21 面试题
生产现场工艺工程师岗位职责
2013/11/28 职场文书
小区门卫岗位职责
2013/12/31 职场文书
高一学生评语大全
2014/04/25 职场文书
2014年教研组工作总结
2014/11/26 职场文书
总经理司机岗位职责
2015/04/10 职场文书
暑假打工感想
2015/08/07 职场文书
校园安全教育心得体会
2016/01/15 职场文书
关于感恩的作文
2019/08/26 职场文书
使用Ajax实现进度条的绘制
2022/04/07 Javascript
Android 中的类文件和类加载器详情
2022/06/05 Java/Android
Go调用Rust方法及外部函数接口前置
2022/06/14 Golang