在vue中使用Autoprefixed的方法

为了使我们的项目兼容各种浏览器，我们可能会在开发中写大量的前缀。即使有了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代码了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 在vue中使用Autoprefixed的方法

    为了使我们的项目兼容各种浏览器,我们可能会在开发中写大量的前缀.即使有了IDE为我们提供了边界的方式.但是仍然需要我们去花时间和精力.而这样会浪费我们很多的时间.为了在开发中提升团队的开发效率,并且同时节省时间,我们引入了autoprefixed.搭配webpack使用,在每次打包的时候自动的给我们的样式加上前缀来兼容不同的浏览器. 安装依赖包 如果你是使用vue-cli构建的项目.首先执行以下代码安装依赖包. npm install autoprefixer postcss postcss-l

  • 在Vue中使用echarts的方法

    上篇文章给大家介绍了 在 webpack 中使用 ECharts的实例详解,可以点击查看. 1. 使用NPM安装(全局引入) 执行下面的命令: npm install echarts--save 引入echarts模块 在Vue项目的main.js中引入echarts模块,即是写入如下代码: import echarts from 'echarts' Vue.prototype.$echarts = echarts: 2. 按需引入 上面全局引入会将所有的echarts图表打包,导致体积过大,我

  • vue中使用cropperjs的方法

    用vue的项目里需要对图片进行裁剪,于是使用了cropperjs,在使用的过程中也踩过一些坑,以下是在.vue文件里cropperjs的使用方法和经验教训总结: 在使用之前,先引入: 在项目里,运行: npm install cropperjs -save 在template里: <div id="demo"> <!-- 遮罩层 --> <div class="container" v-show="panel">

  • vue中实现methods一个方法调用另外一个方法

    vue在同一个组件内: methods中的一个方法调用methods中的另外一个方法 可以在调用的时候  this.$options.methods.test2(); this.$options.methods.test2();一个方法调用另外一个方法: new Vue({ el: '#app', data: { test:111, }, methods: { test1:function(){ alert(this.test) }, test2:function(){ alert("this

  • vue中使用mxgraph的方法实例代码详解

    1.npm 引入 npm install mxgraph --save 2.这个模块可以使用require()方法进行加载.它将返回一个接受对象作为选项的工厂函数.必须将mxBasePath选项提供给工厂函数,而不是将其定义为一个全局变量. var mxgraph = require("mxgraph")( { // 以下地址不需要修改 mxImageBasePath: "./src/images", mxBasePath: "./src" })

  • Vue 中使用 typescript的方法详解

    什么是typescript typescript 为 javaScript的超集,这意味着它支持所有都JavaScript都语法.它很像JavaScript都强类型版本,除此之外,它还有一些扩展的语法,如interface/module等. typescript 在编译期会去掉类型和特有语法,生成纯粹的JavaScript. Typescript 5年内的热度随时间变化的趋势,整体呈现一个上升的趋势.也说明ts越来越️受大家的关注了. 安装typescript npm install -g ty

  • vue中使用vue-pdf的方法详解

    需求:简单说~~有两个pdf文件需在h5上展示,通过点击按钮切换不同文件的显示 注: 1.vue-pdf默认展示首页,我这里的需求是通过滑动展示所有页面,这里使用的v-for遍历.有多少页就加载了多少个pdf组件. 2.pdf文件存在跨域问题,这个需要后端同学支持. 3.demo上的pdf文件只有一页,测试多页展示,自己改用多页pdf文件即可 <template> <div class="pdf_wrap"> <div class="pdf_li

  • vue中使用TypeScript的方法

    vue中使用TypeScript的方法

    引言 近几年前端对 TypeScript的呼声越来越高,Typescript也成为了前端必备的技能.TypeScript 是 JS类型的超集,并支持了泛型.类型.命名空间.枚举等特性,弥补了 JS 在大型应用开发中的不足. 在单独学习 TypeScript时,你会感觉很多概念还是比较好理解的,但是和一些框架结合使用的话坑还是比较多的,例如使用 React.Vue 这些框架的时候与 TypeScript 的结合会成为一大障碍,需要去查看框架提供的.d.ts的声明文件中一些复杂类型的定义.组件的书写

  • vue中jsonp的使用方法

    vue中jsonp的使用方法

    目录 1.前言 2.安装 3.使用 4.vue文件使用 1.前言 最近在做手写输入法时遇到跨域问题,使用的是qq输入法的接口,代理无法实现效果,这里使用jsonp来实现.jsonp原理可以自行百度,这里记录一下vue-jsonp的使用和踩的一点小坑,官方文档请前往npm地址. 2.安装 npm install vue-jsonp -S 或者 yarn add vue-jsonp 3.使用 mian.js引用 // main.js import Vue from 'vue' import { Vu

  • vue中Promise的使用方法详情

    目录 一.使用 1.promise是一种异步解决方案 2.asyncawait 简介: promise是什么,它可以说是异步编程的一种解决方法,就拿传统的ajax发请求来说,单个还好,如果是一个请求回来的数据还要被其他请求调用,不断地嵌套,可想而知,代码看起来是很乱的,promise主要是为了解决这种情景而出现的. 一.使用 1.promise是一种异步解决方案 由于ajax异步方式请求数据时,我们不能知道数据具体回来的事件,所以过去只能将一个callback函数传递给ajax封装的方法,当aj

随机推荐