1.下载lib-flexible 使用的是vue-cli+webpack,通过npm来安装的 npm i lib-flexible --save 2.引入lib-flexible 在main.js中引入lib-flexible import 'lib-flexible/flexible' 3.设置meta标签 通过meta标签,设置设备宽度以及缩放比例 <meta name="viewport" content="width=device-width, initial-

1.安装 npm install postcss-pxtorem --save 2.找到postcss.config.js 默认是这样 module.exports = { "plugins": { "autoprefixer": {}, } } 修改成这样 module.exports = { "plugins": { "autoprefixer": { browsers: ['Android >= 4.0', 'iO

1.安装postcss-import,postcss-cssnext 包 2.修改package.json 将postcss响应的内容替换为 "postcss": { "plugins": { "postcss-import": {}, "postcss-cssnext": {} } },

摘要 由于需要用到弹出层但是懒得造轮子所以使用vant 介绍 使用的node包管理器为yarn vue-cli版本4 rem计算方式为index.html的js脚本计算 安装vant yarn add vant 配置 安装babel-plugin-import实现按需加载 yarn add babel-plugin-import 配置babel .babelrc 与package.json同级 如果没有就创建一个 { "plugins": [ ["import",

REM适配 基础配置 在页面布局之前,对REM进行配置,以适配移动端特点. 官方参考 Vant文档---->快速上手---->进阶用法---->Rem适配----> Vant 中的样式默认使用px作为单位,如果需要使用rem单位,推荐使用以下两个工具: postcss-pxtorem 是一款 postcss 插件,用于将单位px转化为 rem. lib-flexible 用于设置 rem 基准值,设置 font-size 基准值. 注意:rem单位值 = px像素值 / rootV

如果你喜欢使用PostCSS,但又不想抛弃你最喜欢的预处理器.不用担心,你不需要作出二选一的选择,你可以把PostCSS和预处理器(Sass.Stylus或LESS)结合起来使用. 有几个PostCSS插件配合预处理器得到很好的赞誉,因为他们将功能添加到你的工作流中,让你工作变得更加轻松.如果你只使用一个预处理器,而不使用这些插件,你的工作流至少会变得更加困难. 我们会涉及一些免费的PostCSS插件,然后我们将会介绍一些配置的阐述,告诉您如何将PostCSS和你喜欢的预处理器(Sass.Sty

代码:github 一.webpack4--基本配置 这一部分通过webpack的基本配置,使用loader对图片和样式进行打包,从而了解webpack4简单的用方法,保证自己能够配置正确,提升学习动力. 1.初始化配置 mkdir webpack4 cd webpack4 mkdir demo1 cd demo1 npm init -y 或 npm init 目录结构 webpack4 ├── webpack4/demo1 │   └── webpack4/demo1/package.json

图中&属于postcss的语法,这样书写样式可以清楚的看出选择器之前的层级关系,非常好用. 在利用vue-cli脚手架搭建的项目中如果不配置是不支持这种写法的,这样写不会报错,但是样式不生效. 为了让项目中的vue文件支持这种写法,需要在配置postcss-cssnext模块. 往项目中安装postcss-cssnext模块: npm install postcss-cssnext --save-dev 安装完后,会在项目的package.json文件的devDependencies对象中看到p

使用webpack2.0配置postcssloader 安装postcss-loader npm install --save-dev postcss-loader 然后配置webpack.config.js { test:/\.css$/, use:[ 'style-loader','css-loader?importLoaders=1','postcss-loader' ] } 一种办法是配置postcss.config.js module.exports = { plugins: [ re

当听到极速零配置打包,我不经兴奋起来,零配置!!!想起在webpack打包的配置,这个零配置着实让我好奇不已,迅速学习一波. Parcel(parcel 英[ˈpɑ:sl] 美[ˈpɑ:rsl])有以下几大特点: 极速打包.Parcel使用 worker 进程去启用多核编译.同时有文件系统缓存,即使在重启构建后也能快速再编译. 将你所有的资源打包.Parcel 具备开箱即用的对 JS, CSS, HTML, 文件 及更多的支持,而且不需要插件. 自动转换.如若有需要,Babel, PostCSS

“代码质量”这个术语对于程序员来说并不陌生.毕竟,每个开发人员都知道,代码只是能工作是不够的.它还应该具备其他要素:它应该是可读的,良好的格式和一致性.它也应该符合一些标准的量化指标.不过这些在写CSS时,经常被忽略.我们可以花很多时间讨论为什么会发生这种情况,但重要的是,CSS编码是和JavaScript,PHP等一样,我们要关注我们写代码的方式.否则,可能会导致很多复杂的问题. 在本文中,我们将探讨我们如何能够利用PostCSS帮助我们,保持我们的CSS代码质量更高.首先,找出“好CSS代码

PostCss是什么? PostCSS在webpack中的基本应用 一.PostCss是什么? 如果有深入学习PostCss需求的话可以参考大漠的资料:https://www.w3cplus.com/blog/tags/516.html 大概来说postcss是一个用来处理css的系统程序,它不是css语处理器,也不是css后处理后处理器,也不是新的语法,也不是优化工具.postcss本身只做两件事,将css转换成css抽象语法树,可以简单的理解为将css转换成js:postcss做的第二件事就

效果如下 使得大屏不论在什么宽高比例依然能展示全部数据 安装 npm install -S postcss-pxtorem rem配置思路 原先的rem函数是能解决大部分的问题的,如果展示不全,也可以用滚动条. 但是大屏展示又不能使用滚动条,又必须展示全部的内容,这个时候就需要改变原来的计算方式,需要根据屏幕的实际高度来计算对应的屏幕宽度 1. 配置rem.js文件 rem.js可以放在src文件夹下,我是放在src下的utils文件夹中 初始的rem配置 // 设置 rem 函数 functi

vue-cli2.x创建完项目 安装postcss-sprites yarn add postcss-sprites -D 根目录配置postcss.config.js配置中,需要注意,1:当有用pxtorem 或者 pxtoviewport等像素转换的时候,需要把postcss-sprites的参数放在前面,这样生成后的雪碧图定位才会被后面的plugins转换.2:spritePath不需要制定到编译后的dist目录中,因为dist里最终会通过webpack的file-loader生成一个带h

针对新手入门搭建项目,Webpack5 配置手册(从0开始) webpack安装顺序 1. `npm init -y`,初始化包管理文件 package.json 2. 新建src源代码目录 3. 新建index.html 4. `yarn add webpack webpack-cli`,安装webpack相关包 5. 在项目根目录中,创建webpack.config.js 的配置文件 6. `yarn add webpack-dev-server`,安装支持项目自动打包的工具,并配置 7.

webpack学习之旅 好好学习 天天向上!遇到bug,不要慌! 文章目录 webpack学习之旅 大一统的模块化规范--ES6模块化 1.node.js中通过babel体验ES6模块化 2.ES6模块化基本语法 设置默认导入和导出 按需导入导出 直接导入并执行代码 webpack正文 创建列表隔行变色项目 webpack基本使用 安装和配置webpack文件 配置webpack的打包入口和出口 设置webpack自动打包 配置html-webpack-plugin 配置自动打包参数 webpa

背景 在项目使用lib-flexible还有postcss-px2rem实现移动端适配,当我们引入第三方的样式组件库,发现一个问题.那些组件库的样式都变小了. 问题原因 变小的主要原因是第三库 css一依据 data-dpr="1" 时写的尺寸 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.

公司最近做的一个移动端项目从搭框架到前端开发由我独立完成,以前做移动端适配用的媒体查询,这次想用点别的适配方案,然后就采用了vue-cli3.0结合lib-flexible.px2rem实现移动端适配的方案,开发过程中也遇到一些坑,自己选的方案自己填坑吧.以下记录我的项目框架搭建及填坑方案. 搭建可以参考我的另一篇文章vue-cli 3.0 搭建项目流程,这里就不再另外说明了.下面说明项目搭建成功后的适配方案. 第一部分:项目中引入lib-flexible 一.项目中安装lib-flexible

介绍postcss-pxtorem 是一款 postcss 插件,用于将单位转化为 remlib-flexible 用于设置 rem 基准值 1.安装lib-flexible(用于设置 rem 基准值) npm i -S amfe-flexible 2.在main.js文件中引入lib-flexible import 'amfe-flexible' 3.安装postcss-pxtorem(postcss-pxtorem是一款 postcss 插件,用于将单位转化为 rem) npm instal

最近在用 Vue3 写一个开源的商城项目,开源后让大家也可以用现成的 Vue3 大型商城项目源码来练练手,目前处于开发阶段,过程中用到了 Vant3.0,于是就整理了这篇文章来讲一下如何使用 Vue3.0 + Vant 3.0 搭建种子项目. 前文回顾:<Vue3 来了,Vue3 开源商城项目重构计划正式启动!> 众所周知,Vue 3.0 发布已经有小一个月的时间了,但是市面上能作出快速相应的 Vue UI 组件库并不多,就我目前所知的有 Ant Design of Vue.Vant,这俩组件

一.Vue的前世 Vue 框架诞生于2014年,他的作者为中国人–尤雨溪(江苏无锡人).Vue用于构建交互式的Web界面的库,是一个构建数据驱动的Web界面渐进式框架,该框架遵循CMD规范,并且提供的设计模式为MVVM模式.发展至今已经有诸多版本,目前推荐使用比较稳定的2.0版本 二.Vue的今生 什么是Vue?Vue是一套用于构建用户界面的渐进式框架.提到Vue就不得不提前端框架的三驾马车:angular 谷歌公司,react Facebook,Vue 尤雨溪.这三种框架都有不同的特性,如要一