微信搜索superit|邀请体验:大数据, 数据管理、OLAP分析与可视化平台 | 赞助作者:赞助作者

移动端引入flexible自适应模块

前端 aide_941 28℃

通过vue-cli 初始化vue项目
输入命令行新建 vue-demo 项目

vue init webpack vue-demo(项目名)
然后就可以一路回车键了

$ vue init webpack vue-demo

? Project name (vue-demo)
? Project name vue-demo
? Project description (A Vue.js project)
? Project description A Vue.js project
? Author (xxx <xxx@123.com>)
? Author xxx<xxx@123.com>
? Vue build standalone
? Install vue-router? (Y/n) y
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n //是否使用ESLint管理代码
? Use ESLint to lint your code? No
? Set up unit tests (Y/n) n
? Set up unit tests No
? Setup e2e tests with Nightwatch? (Y/n) n
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recom
? Should we run `npm install` for you after the project has been created? (recom
mended) npm

vue-cli · Generated “vue-demo”.

# Installing project dependencies …
# ========================
ESLint的用途:

1.审查代码是否符合编码规范和统一的代码风格;
2.审查代码是否存在语法错误;
在项目中使用 ESLint 总是会报各种错误,所以开发的时候我一般是不开启的

安装完成后,会显示

# Project initialization finished!
# ========================

To get started:

cd vue-demo
npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack
这时如果直接运行 npm run dev 会报错,需要再安装项目依赖

进入到 vue-demo 文件夹下,执行命令行

cd vue-demo
npm install(或者是cnpm install)
执行完成后,在 vue-demo 文件夹下新增 node_modules 文件

启动服务,执行命令行

$ npm run dev
> vue-demo@1.0.0 dev E:\mytest\vuetest\vue-demo
> webpack-dev-server –inline –progress –config build/webpack.dev.conf.js

95% emitting DONE Compiled successfully in 3868ms15:24:20

I Your application is running here: http://localhost:8081
在浏览器中输入 localhost:8081 访问页面,如果想要自动启动浏览器页面,需要在 config/index.js文件中修改相关配置

module.exports = {
dev: {

// Paths
assetsSubDirectory: ‘static’,
assetsPublicPath: ‘/’,
proxyTable: {},

// Various Dev Server settings
host: ‘localhost’, // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: true,//是否自动启动浏览器
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
修改autoOpenBrowser:true,

Ctrl+C 退出服务后再启动 npm run dev 就可以自动打开网页

适配移动端flexible.js
适用于最新版vue-cli,配置手淘的lib-flexible.js和rem实现移动端页面自适应

1.安装lib-flexible.js

npm install lib-flexible –save
2.在项目入口文件main.js中引入lib-flexible

import ‘lib-flexible/flexible.js’
3.px转换rem

使用 webpack 的 px2rem-loader,自动将px转换为rem
安装px2rem-loader

npm install px2rem-loader –save-dev
4.配置px2rem-loader

首先找到 build/utils.js文件,在utils.js中添加如下配置

找到generateLoaders方法,在函数里如下配置

这里最重要的就是要在上图两个位置都要加上px2remLoader,不然不会起作用!!!
5.px2rem 用法

安装px2rem后,再使用px上有些不同,大家可以参考px2rem官方介绍,下面简单介绍一下。

直接写px,编译后会直接转化成rem —- 除开下面两种情况,其他长度用这个
在px后面添加/no/,不会转化px,会原样输出。 — 一般border需用这个
在px后面添加/px/,会根据dpr的不同,生成三套代码。—- 一般字体需用这个
示例代码
编译前(自己写的代码)

.example{
width: 150px;
height: 64px; /*px*/
font-size: 28px; /*px*/
border: 1px solid #ddd; /*no*/
}
编译后

.example{
width: 2rem;
border: 1px solid #ddd;
}
[data-dpr=”1″] .selector {
height: 32px;
font-size: 14px;
}
[data-dpr=”2″] .selector {
height: 64px;
font-size: 28px;
}
[data-dpr=”3″] .selector {
height: 96px;
font-size: 42px;
}
这样基本配置就完成了,重启项目就可以使用lib-flexible+rem编写移动端页面了
注意:vue移动端 border 或分割线中的 1px 不希望被转成 rem,只要再后面写上注释 /*no*/ 就可以了
———————
作者:qq_33755457
来源:CSDN
原文:https://blog.csdn.net/qq_33755457/article/details/83536978
版权声明:本文为博主原创文章,转载请附上博文链接!

转载请注明:SuperIT » 移动端引入flexible自适应模块

喜欢 (0)or分享 (0)