Vue黑马头条移动端项目day01

一.开始时的一些步骤


二.具体步骤

1.准备一些字体图标,用到阿里巴巴的矢量图库: https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2

打开网站登录,在资源管理中找到我的项目,新建项目,将素材里面的svg导入到本地项目中去,去除颜色并提交.


2.引入vant组件库

https://vant-contrib.gitee.io/vant/#/zh-CN/

# Vue 2 项目,安装 Vant 2:npm i vant -S

安装插件后需要重启一下vscode,重新加载.


3.复习移动端适配,rem是相对于html标签的字体大小而言的.

https://unpkg.com/


4.安装移动端 REM 适配

Vant 中的样式默认使用 px 作为单位,如果需要使用 rem 单位,推荐使用以下两个工具:

postcss-pxtorem 是一款 postcss 插件,用于将单位转化为 rem

lib-flexible 用于设置 rem 基准值


npm i -S amfe-flexible

main.js中引入:import 'amfe-flexible'

npm uninstall postcss-pxtorem

npm install postcss-pxtorem@5.1.1

https://cli.vuejs.org/zh/guide/css.html#postcss


使用 postcss-pxtorem 将 px 转为 rem


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容