01项目准备工做

1.字体图标准备css

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

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

  

 

 

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

   接着在main.js中引入: import './assets/styles/icon.css'nginx

  测试:(可经过类名对图标进行大小颜色的设置)web

  

  结果成功展现:npm

  

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

  一、安装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端口:

    

相关文章
相关标签/搜索