vue知识点—2（适配，vant，阿里图库）

我妈已经三天没打我了

已于 2024-07-30 14:54:42 修改

阅读量187

点赞数

分类专栏： vue小知识文章标签： vue.js 前端 javascript

于 2023-03-20 18:20:33 首次发布

本文链接：https://blog.csdn.net/weixin_61710685/article/details/129663325

版权

vue小知识专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章讲述了Vue项目的初始化配置，包括APP.vue中的路由出口，组件的命名规范，以及项目目录结构如api和utils文件夹的创建。此外，提到了CSS重置样式表reset.css的重要性和移动端适配的方法，如使用postcss-pxtorem和amfe-flexible进行rem单位转换和基础字体大小设置。

摘要由CSDN通过智能技术生成

1、#APP.vue文件

路由出口

<router-view></router-view>

2、要给每个组件起名字（与组件名字一致）

export default {
  name: "APP",
};

3、新建文件夹

api文件夹

utils文件夹

assets下新建images文件夹，css文件夹，fonts文件夹

css重置样式表内容（reset.css）

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  box-sizing: border-box;
}
/** 预防页面高度塌陷 */
html,
body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  background-color: #fff;
}
/* 设置HTML5元素为块 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
/** ul,ol去除序列标识 */
ul,
ol,
li {
  list-style: none;
}
/* 清除浮动 */
.clearfix:after {
  visibility: hidden;
  clear: both;
  display: block;
  content: ".";
  height: 0;
}
/* input */
input {
  /* 去掉点击输入框高亮 */
  outline: none;
  /* 去掉输入框的外边框 */
  border: none;
  /* 清除输入框内阴影 */
  -webkit-appearance: none;
}
/* 清除输入框内阴影 */
input,
select,
textarea {
  border: 0;
  -webkit-appearance: none;
  appearance: none;
}
a {
  /* 小手 */
  cursor: pointer;
  /* 取消超链接的默认下划线 */
  text-decoration: none;
  /* antd里面还做了 ， 看你团队需不需要这样的风格 */
  /* transition: color 0.3s ease; */
}
/* 图片自适应 */
img {
   /* display: block; */
   max-width: 100%;
   height: auto;
   width: auto\9;
   /* ie8 */
   -ms-interpolation-mode: bicubic;
   /*为了照顾ie图片缩放失真*/
}


/******** iPhone *********/
/* 去除iPhone中默认的input样式 */
input {
  -webkit-appearance: none;
  resize: none;
}

/* 禁用iPhone中Safari的字号自动调整 */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  /* 字体大小设置为 100px */
  font-size: 100px;
}

/* 禁用长按页面时的弹出菜单(iOS下有效) ,img和a标签都要加 */
img,
a {
  -webkit-touch-callout: none;
}

4、引入vant(看其他文章)

5、引入阿里矢量图库(看其他文章)

6、移动端适配

如果需要使用 rem 单位进行适配，推荐使用以下两个工具：（不能转化行内样式 <span style="width: 10rem;">）

postcss-pxtorem 是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位
lib-flexible 用于设置 rem 基准值

npm install postcss postcss-pxtorem@5.1.1 （vant2指定版本）

npm i -S amfe-flexible

在main.js中引入amfe-flexible

import 'amfe-flexible'

创建postcss.config.js

module.exports = {
   plugins: {
     'postcss-pxtorem': {
       // 能够把所有元素的px单位转成Rem
       // rootValue: 转换px的基准值。
       // 编码时, 一个元素宽是75px，则换成rem之后就是2rem
       rootValue: 37.5,
       propList: ['*']
     }
   }
 }