01项目准备工作

Posted 2020-11-21 xifeng59

1.字体图标准备

　　https://www.iconfont.cn/下载项目中需要的SVG图标

　　https://icomoon.io/app/#/select  在这个网站导入下载好的SVG图标，生成字体图标

　　

 

 

 　　这边的fonts是通过style.css来引用的，我习惯把style.css改成icon.css,然后在项目文件中src-->assets下新建一个styles目录，将fonts文件夹和icon.css复制进去。

　　 接着在main.js中引入： import ‘./assets/styles/icon.css‘

　　测试：（可通过类名对图标进行大小颜色的设置）

　　

　　结果成功展示：

　　

2.项目依赖包下载+项目配置

　　1、安装sass：

　　　　npm install --save-dev node-sass sass-loader

　　　　

　　　　此处用的node版本为10.14.1，如果是老版本下载的sass，在node高版本下会有兼容问题，请卸载sass重新安装。

　　　　卸载：npm uninstall --save-dev node-sass sass-loader

3.准备web字体

　　以前 CSS3 的版本，网页设计师不得不使用用户计算机上已经安装的字体。现在使用 CSS3，网页设计师可以使用他/她喜欢的任何字体。

　　当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。

　　您"自己的"的字体是在 CSS3 @font-face 规则中定义的。

　　

 

　　从谷歌上下载的web字体 需要的话可以底下留邮箱，我发给你。

　　字体引入方式有两种：

　　第一种：在index.html中引入

　　　　<link rel="stylesheet" href="<%= BASE_URL %>fonts/daysOne.css">

　　　　然后在app.vue中演示　　　

<template>
  <div id="app">
    <router-view/>
    <div class="test">ABCD</div>
  </div>
</template>

<style scoped>
.test {
  font-family: ‘Days One‘;
  font-size: 40px;
  color: red;
}
</style>

　　　　结果：

　　第二种方法：在main中引入

　　　　import ‘./assets/fonts/daysOne.css‘  一样可以实现

4.viewport配置

　　<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no;">

5.rem设置

1 document.addEventListener(‘DOMContentLoaded‘, () => {
2   const html = document.querySelector(‘html‘)
3   let fontSize = window.innerWidth / 10
4   fontSize = fontSize > 50 ? 50 : fontSize
5   html.style.fontSize = fontSize + ‘px‘
6 })

6.global.scss和reset.css+自适应布局实现思路

　　在assets下新建一个global.scss和reset.scss，然后在main.js中引入 ：import ‘./assets/styles/global.scss‘

　　在reset中写入：　　

 1 @charset ‘utf-8‘;
 2 /* CSS reset */
 3 html{color:#000;background:#fff;font-family:Arial,‘Microsoft YaHei‘;}
 4 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td,strong{padding:0;margin:0;font-family:Arial,‘Microsoft YaHei‘;}
 5 table{border-collapse:collapse;border-spacing:0;}
 6 fieldset,img{border:0;}
 7 a{text-decoration:none; color:#ccc; outline:none;}/*此处待添加默认链接颜色*/
 8 var,em,strong{font-style:normal;}
 9 address,caption,cite,code,dfn,em,strong,th,var, optgroup{font-style:inherit;font-weight:inherit;}
10 del,ins{text-decoration:none;}
11 li{list-style:none;}
12 caption,th{text-align:left;}
13 h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
14 q:before,q:after{content:‘‘;}
15 abbr,acronym{border:0;font-variant:normal;}
16 sup{vertical-align:baseline;}
17 sub{vertical-align:baseline;}
18 legend{color:#000;}
19 input,button,textarea,select,optgroup,option{font-family:inherit; font-size:inherit;font-style:inherit;font-weight:inherit;}
20 input,button,textarea,select{*font-size:100%;}
21 .clearfix:after {content:"200B"; display:block; height:0; clear:both; }
22 .clearfix { *zoom:1; }
23 *{-webkit-tap-highlight-color:rgba(0,0,0,0);}
24 html,body {
25     width: 100%;
26     height: 100%;
27     user-select: none;
28     overflow: hidden;
29     font-family: ‘PingFangSC-Light‘,‘PingFangSC‘,‘Arial‘,‘sans-serif‘;
30 }

　　在global.scss引入reset即可： @import "./reset";

　　为了使项目中使用px能自动换算成rem，因此定义一个方法 px2rem

　　在global中定义这个方法：

　　

$ratio: 375/10;

@function px2rem($px) {
    @return $px / $ratio + rem;
}

　　在App.vue中使用：

1 <style lang="scss" scoped>
2   @import "./assets/styles/global";
3   .test {
4     font-family: ‘Days One‘;
5     font-size: px2rem(20);
6     color: red;
7   }
8 </style>

7.单间静态资源服务器（nginx）

 　　有点占用内存少，运行速度快，并发能力强。

　　1、登录http://nginx.org/  下载，解压安装，打开exe文件就行