失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > vue/cli 3.0 脚手架【进阶】 使用 amfe-flexible 和 postcss-px2rem进行移动端适

vue/cli 3.0 脚手架【进阶】 使用 amfe-flexible 和 postcss-px2rem进行移动端适

时间:2022-05-28 07:22:13

相关推荐

vue/cli 3.0 脚手架【进阶】  使用 amfe-flexible 和 postcss-px2rem进行移动端适

安装vue-cli3

npminstall -g @vue/cli

创建项目 vue-cli-test

脚手架-项目-成功-运行项目

基于vue-cli配置移动端自适应

转自://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

在命令行中运行如下安装:

npm install --save amfe-flexible

安装完 package.json会添加这个依赖

引入 lib-flexible

在项目入口文件 main.js 里 引入 lib-flexible

import 'amfe-flexible'

运行后每个尺寸都对应font-size

添加 meta 标签

在项目根目录的 index.html 中添加如下 meta

<meta name="viewport" content="width=device-width, initial-scale=1.0">

px 转 rem

实际开发中,我们通过设计稿得到的值单位是 px,所以要将 px 转换成 rem 再写进样式中。在项目中只需要写px,运行后会自动转化成rem,

将 px 转换成 rem 我们将使用 px2rem 这个工具,postcss-px2rem

安装postcss-px2rem

在命令行中运行如下安装:

npm install postcss-px2rem --save

安装完 package.json变化如下:

若有需要就这么配置

"postcss-px2rem": {"remUnit": 37.5}

报错Can’t resolve ‘stylus-loader’,原来是因为我没有安装stylus和stylus-loader。

使用如下命令安装stylus和stylus-loader:

npm install stylus stylus-loader --save-dev

安装成功后,使用npm install重新建立依赖:

npm install

打开项目代码,找到package.json,查看文件中是否已经添加stylus和stylus-loader的版本信息。

npm run serve 运行项目即可

安装vue-router

npm install vue-router

在main.js中引入

import VueRouter from 'vue-router'Vue.use(VueRouter)

【返回】js

back(){this.$router.go(-1)},

如果觉得《vue/cli 3.0 脚手架【进阶】 使用 amfe-flexible 和 postcss-px2rem进行移动端适》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。