安装vue-cli3   npm install -g @vue/cli 创建项目 vue-cli-test 脚手架-项目-成功-运行项目 基于vue-cli配置移动端自适应 转自:http://hjingren.cn/2017/06/16/%E5%9F%BA%E4%BA%8Evue-cli%E9%85%8D%E7%BD%AE%E7%A7%BB%E5%8A%A8%E7%AB%AF%E8%87%AA%E9%80%82%E5%BA%94/ 配置 flexible 安装 amfe-flexible  

项目背景需要适配ipad 以及手机端,这时候当然要告别刀耕火种时代啦(自己算rem),因为已经有成熟的工具啦,即px2rem(https://www.npmjs.com/package/px2rem) 配合amfe-flexible(https://www.npmjs.com/package/amfe-flexible) 项目使用的是react+webpack,yarn安装好上述两个依赖文件以后,首先在index.js文件中引入amfe-flexible,代码如下: 重点是: import 'a

前言 最近在用vue做移动端项目,网上找了一些移动端适配的方案,个人觉得手淘团队flexible.js还是比较容易上手,在这里做下总结. 主体 flexible.js适配方案采用rem布局,根据屏幕分辨率大小不同,调整根元素html的font-size,从而达到每个元素宽高自动变化,适配不同屏幕 安装lib-flexible.js npm install lib-flexible --save 在项目入口文件main.js中引入lib-flexible import 'lib-flexible/

参考资料:http://easywork.xin/2018/09/02/react-2/ 我拿到的设计图 是  375px //配置px2rem px2rem({remUnit: 37.5})   在index.html 加以下的script <script>document.getElementsByTagName('html')[0].style.fontSize = (document.documentElement.clientWidth || document.body.client

0.前言: 很多前端小伙伴在写页面尤其是移动端页面的时候,要求页面布局以及字体大小随屏幕宽度变化而随之按比例自适应[注:非响应式],那么,在vue-cli脚手架中应该如何去实现呢? 1.安装flexible库 : //在项目库下运行:npm i lib-flexible --save-dev 2.项目入口文件main.js中引入lib-flexible: //main.js中:import 'lib-flexible' 3.在项目index.html的head中配置meta: <meta nam

p.p1 { margin: 0; font: 12px "Helvetica Neue" } p.p2 { margin: 0; font: 12px "Helvetica Neue"; min-height: 14px } span.s1 { font: 12px "PingFang SC" } 主要是通过lib-flexible搭配px2rem,将设计稿中固定的px单位转换成根据屏幕大小自动计算的rem单位,达到屏幕适配的目的. 在此之前需

1.安装postcss-px2rem npm install postcss-px2rem --save npm install postcss-px2rem --save 2.配置px2rem 在配置文件build目录下vue-loader.conf.js中增加 module.exports = { loaders: utils.cssLoaders({ sourceMap: isProduction ? config.build.productionSourceMap : config.de

因为项目需要,vue开发项目,必须将已写的以px为单位的部分,转换为rem.要是全部转换,这大量的计算量,哪怕是sublime Text 的cssrem插件,也是一个庞大的工作量.所以,直接使用插件没商量. 举例子: 1.iphone6 2.iphone5 第一步:因为rem是根据更元素来计算大小,所以,捕捉到当前屏幕的大小并赋值给html,这是其一 第二步:使用px2rem插件,来捕捉当前项目的所有px,直接计算相对应数值. 这样,以后写界面,就可以直接用px来构建界面,不用自己去计算啦! 好

最近在和设计沟通关于设计图尺寸大小和前端实际页面尺寸大小不一致的情况,我们的UI设计是使用的iPone6的,(iphone6:    375px*667px  实际像素:750px*1334px)如果按照她给的尺寸直接复制那么你的页面尺寸就是一个放大镜,正常人都知道那是不对的,我在做的时候有两种解决办法: 一.UI设计尺寸定基数 可以和UI沟通在给你的标记尺寸大小时候,让她基于一个数值,一般是16px.给你标注的时候选择保留两个小数,给你标注成px或者rem. 开发者这时候需要配置开发者工具了,

创建目录 项目名称: vue-init app css reset.sass js home index.vue router index.js main.js App.vue views index.html 安装webpack npm i -D webpack 创建配置文件 webpack.config.js 基础配置 entry 入口 module 模块 plugins 插件 output 输出 进阶配置 resolve devtool devServer ... 基础配置 先写好基本机构

本文的目标是通过下文介绍的适配方案,使用vue或react开发移动端及H5的时候,不需要再关心移动设备的大小,只需要按照固定设计稿的px值布局,提升开发效率. 下文给出了本人分别使用create-react-app搭建的react(create-react-app)项目和使用vue-cli 2.x 搭建的vue项目中的 亲测可用 配置方案. px2rem或postcss-px2rem 在移动端中,为了设配不同的设备,通常使用rem来做适配. rem是通过根元素进行适配的,网页中的根元素指的是<h

cnpm i postcss-px2rem --save cnpm install px2rem-loader --save 2.配置px2rem build目录下vue-loader.conf.js中,做如下修改: module.exports = { loaders: utils.cssLoaders({ sourceMap: isProduction ? config.build.productionSourceMap : config.dev.cssSourceMap, extract:

在vue-cli中配置屏幕自适应的方法 首先,我们需要安装flexible库． npm i lib-flexible --save 在index.html文件当中配置meta标签, <meta name="viewport" content="width=device-width, initial-scale=1.0"> 借助px2rem工具 npm i px2rem-loader --save-dev 然后就是配置这个工具,由于是loader文件,所有

移动端自适应:手淘的 lib-flexible + rem 配置 flexible 安装 lib-flexible 在命令行中运行如下安装: 1 npm i lib-flexible --save 引入 lib-flexible 在项目入口文件 main.js 里 引入 lib-flexible 12 // main.jsimport 'lib-flexible' 添加 meta 标签 在项目根目录的 index.html 中添加如下 meta 1 <meta name="viewport

一.rem之px2rem适配 前言:相信许多小伙伴上手移动端时面对各式各样的适配方案,挑选出一个自己觉得简便.实用.高效的适配方案是件很纠结的事情. 深有体会... 经过多个移动端项目从最初的 viewport --> 百分比 --> rem --> rem的升级版px2rem可谓是一把鼻涕一把泪啊 ,在px2rem之前总觉得之前的不够完美或者麻烦: 进入正题: 首先 px2rem 也是基于 rem  适配的,但是他的好用之处在于灵活.简便.高效不用我们自己去换算.px2rem-load

一.创建项目 1.使用如下命令生成项目 vue init nuxt-community/starter-template testPro --testPro为项目名称 2.进入到项目根目录下,使用npm install 安装依赖 3.npm run dev 在开发环境下运行项目 二.修改项目的host 和 port 在package.json文件中新增如下代码: "config": { "nuxt": { "host": "0.0.0.

没接触过flexible的建议先看看大漠的这篇文章这样你才会知道长度为什么用rem,而字体要用px 安装flexible npm install lib-flexible --save 引入flexible 在项目入口文件main.js中添加如下代码,引入flexible import 'lib-flexible' px 转 rem 使用 webpack 的 px2rem-loader,自动将px转换为rem 安装px2rem-loader npm install px2rem-loader -

配置less 安装less-loader yarn add less-loader 打开 webpack.config.dev.js 和 webpack.config.prod.js 找到  test: /\.css$/,  修改为  test: /\.(css|less)$/, 找到 text 字段下的 use ,给use数组在添加一个对象 { loader: require.resolve('less-loader')} 重启服务 启用css作用域(css只对本页面生效) 打开 webpac

注意:要安装俩次gulp(全局和本地):全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能. 之前由大牛帮忙配置的gulp来用.今天时间充裕,就和小伙伴一起动手配置gulp及其插件. 前提:已安装nodejs——npm  (备注教程  “物理安装”) 第一步:建了一个Gulp文件夹,保存插件用于使用第二步:进入nodejs环境下安装cnpm淘宝镜像文件(若npm install 时报错,形如 npm ERR!Windows_NT XXX ,则将之前存在的.np

很多同学可能在写h5的时候,也会遇到移动端如何控制屏幕自适应问题!在移动端网页开发中,我们可以用手机淘宝的flexible．那么在vue当中,也同样可以用!接下来就介绍下如何在vue-cli配置的项目里来实现屏幕自适应首先,我们需要安装flexible库．npm i lib-flexible --save然后在项目入口文件main.js里引入lib-flexibleimport 'lib-flexible'记得配置meta标签,在index.html文件当中<meta name="view

最近在写移动端项目,就想用lib-flexable,px2rem来进行适配,把px转换成rem但是也用到了第三方UI组件库vux,把这个引入发现一个问题就是vux的组件都缩小了,在网上找不到答案,最后在一个vue开发群里找到了解决的方法,目前的处理方法是将vux组件中px转化为PX,避免被转成rem 可以参考一下这篇文章vue中的适配:px2rem 在webpack.base.conf.js中 vuxLoader中配置以下代码 { name: 'vux-ui' }, { name: 'after