vue-cli项目中.postcssrc.js
module.exports = {"plugins": {"postcss-import": {}, //用于@import导入css文件"postcss-url": {}, //路径引入css文件或node_modules文件"postcss-aspect-ratio-mini": {}, //用来处理元素容器宽高比"postcss-write-svg": { utf8: false }, //用来处理移动端1px的解决方案。该插件主要使用的是border-image和background来做1px的相关处理。"postcss-cssnext": {}, //该插件可以让我们使用CSS未来的特性,其会对这些特性做相关的兼容性处理。"postcss-px-to-viewport": { //把px单位转换为vw、vh、vmin或者vmax这样的视窗单位,也是vw适配方案的核心插件之一。viewportWidth: 750, //视窗的宽度viewportHeight: 1334, //视窗的高度unitPrecision: 3, //将px转化为视窗单位值的小数位数viewportUnit: 'vw', //指定要转换成的视窗单位值selectorBlackList: ['.ignore', '.hairlines'], //指定不转换视窗单位值得类,可以自定义,可以无限添加minPixelValue: 1, //小于等于1px不转换为视窗单位mediaQuery: false //允许在媒体查询中使用px},"postcss-viewport-units":{}, //给vw、vh、vmin和vmax做适配的操作,这是实现vw布局必不可少的一个插件"cssnano": { //主要用来压缩和清理CSS代码。在Webpack中,cssnano和css-loader捆绑在一起,所以不需要自己加载它。preset: "advanced", //重复调用autoprefixer: false, //cssnext和cssnano都具有autoprefixer,事实上只需要一个,所以把默认的autoprefixer删除掉,然后把cssnano中的autoprefixer设置为false。"postcss-zindex": false //只要启用了这个插件,z-index的值就会重置为1}}
}
.postcssrc.js文件里边的各个文件对应的含义;
注意:(vue中的几个文件的理解)
1、.postcssrc.js
众所周知为兼容所有浏览器,有的CSS属性需要对不同的浏览器加上前缀,然而有时添加一条属性,需要添加3~4条类似的 属性只是为了满足浏览器的兼容,这不仅会增加许多的工作量,还会使得你的思路被打断。 如何解决这个问题? 处理CSS前 缀问题的神器——AutoPrefixer。
Autoprefixer是一个后处理程序,你可以同Sass,Stylus或LESS等预处理器共通使用。它适用于普通的CSS,而你无需关心要 为哪些浏览器加前缀,只需全新关注于实现,并使用W3C最新的规范。
2、.eslintrc.js
eslint是用来管理和检测js代码风格的工具,可以和编辑器搭配使用,如vscode的eslint插件 当有不符合配置文件内容的代码出现就会报错或者警告
3、.babelrc
这个文件是用来设置转码的规则和插件的
vue-cli项目中.postcssrc.js相关推荐
- Vue Cli项目使用PDF.js预览pdf无法访问到viewer.html
今天在开发移动端项目中有个需求是手机端预览pdf,ios可以直接在浏览器预览,安卓不行,所以使用pdf.js来解决,之前项目用过该插件很好用,但是今天使用的时候发现根本没有访问到viewer.html ...
- Vue Cli 项目结构简述
webnode_modules --Vue Cli 项目以来的js模块全放到这里public --存放静态资源 存放自己的js cssfavicon.ico -- 浏览器小图标index.html - ...
- Vue项目9:Vue Cli项目使用echarts可视化
Vue Cli项目使用echarts可视化有两种方式:一.直接引入echarts 二.使用vue-ehcarts. 一.直接引入echarts 1.创建Vue Cli项目 进入cmd命令行,输入如 ...
- vue cli项目升级--vue cli3升级到vue cli4
原文网址:vue cli项目升级--vue cli3升级到vue cli4_IT利刃出鞘的博客-CSDN博客 简介 说明 本文介绍如何升级vue项目的vue cli版本. 官方网址 https://c ...
- html调用腾讯地图定位当前位置,vue web项目中调用腾讯地图API获取当前位置的经纬度...
vue web项目中调用腾讯地图API获取当前位置的经纬度 vue web项目中调用腾讯地图API获取当前位置的经纬度 在main.js 中添加一下代码 import axios from 'axio ...
- vue+ts项目中import图片时报错Cannot find module ‘xxx‘ or its corresponding type declarations
TS项目中import图片时报错Cannot find module 'xxx' or its corresponding type declarations 在vue+ts项目中使用import的形 ...
- vue框架项目中使用阿里矢量图标库
vue框架项目中使用阿里矢量图标库 一.打开阿里矢量图标,将需要图标加入购物车,选择下载代码 二.解压缩包,将解压缩后的 文件夹放入项目文件夹下的src/assets 1.在main.js中引入css ...
- vue+elementUI项目中使用NavMenu导航菜单
vue+elementUI项目中使用NavMenu 导航菜单 在elementUI官网组件中NavMenu 导航菜单的使用只是简单地运用,在实践项目中还需要配合路由配置.一般后台管理系统不只是导航菜单 ...
- vue cli 项目在打包时候报错 API fatal error handler returned after process out of memory
问题描述 vue cli 项目在打包时候报错:API fatal error handler returned after process out of memory. 问题分析 从给出的提示可以看出 ...
最新文章
- struts2标签集
- React事件优雅绑定
- JSON字符串转为指定实体类对象
- 《码出高效:Java开发手册》背后的故事
- html如何算小于0判断错误,如果长度小于0在javascript中提醒
- python中的map、filter、reduce函数
- java跳转控制语句有哪些_Java语言基础学习之流程控制语句和跳转控制语句实例分析...
- 苹果Mac一定要学会的快捷键
- SAP 电商云 Spartacus UI Cart 页面的 CMS 布局
- 【人工智能】Astar算法求解8数码问题(QDU)
- 阿里巴巴Java开发手册(全册四版)
- Ubuntu下F2FS文件系统的安装与挂载
- axis webservice 实验
- 一个出身寒门的状元之死全文【原文】
- 『论文复现系列』3.Glove
- sdl+ffmpeg视频播放器02
- 为什么谐振时电抗为0_串联谐振试验装置不同种类电抗器参数有何不同
- Windows 在cmd 如何进入指定目录
- 终极算法——第八章:无师自通
- word——插入目录
热门文章
- 将1bpp的bmp图像存储为1bpp或者2bpp的tiff格式
- 禅道项目管理_禅道 11.6.1 版本发布,完善细节,修复 Bug
- 基于单片机的自动追日系统设计_基于单片机的自动浇花系统的设计
- 服务器点播直播系统,服务器点播直播系统
- 台式计算机计量单位,计算机的计量单位以及常见的数据类型
- android访问java服务器_Android_post访问java服务器端
- linux怎样以root用户运行,如何在Linux机器中以root用户身份运行Elastic...
- 深信服上网行为管理开启snmp_编写SHELL脚本在CACTI中来实现监控深信服上网行为管理的CPU和内存使用情况...
- php截取字符串函数 左右,php截取中文字符串函数的技巧
- 【TensorFlow-windows】学习笔记四——模型构建、保存与使用