01項目準備工做

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.項目依賴包下載+項目配置

　　一、安裝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）

 　　有點佔用內存少，運行速度快，併發能力強。

　　一、登陸http://nginx.org/  下載，解壓

　　

 　　二、經過系統管理員啓動cmd, start nginx.exe

　　　　　　

 

　　三、配置

　　　　

　　　　輸入如下配置

　　　　

 

 

　　　　

　　　　訪問本地9001端口: