01项目准备工作

时间:2019-11-06
本文章向大家介绍01项目准备工作,主要包括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.项目依赖包下载+项目配置

  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文件就行

  

  

原文地址:https://www.cnblogs.com/xifeng59/p/11800322.html