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: ['*']
}
}
}