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
- 接口测试 | 22 requests基础入门
- 分享一个Mvc的多层架构,欢迎大家拍砖斧正
- Robot Framework | 03 基于Public API创建你RFS测试
- Robot Framework | 02 从抛弃RIDE开始创建你的RFS测试
- ASP.NET5 Beta8可用性
- Docker Swarm集群初探
- 数据库逻辑设计
- 06.移动先行之谁主沉浮----我的代码我来写(Xaml的优势)
- [快学Python3]迭代器和生成器
- [快学Python3]INI文件读写
- Vijos P1131 最小公倍数和最大公约数问题【暴力】
- Vjios P1736 铺地毯【暴力,思维】
- Vijos P1116 一元三次方程求解【多解,暴力,二分】
- Python Selenium设计模式-POM
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- LeetCode 06Z字形变换&07整数反转
- 对搜索表单提交是否为空进行弹出提示
- PWN入门(Fastbin Attack)
- Qt项目网络聊天室设计
- nginx 端口转发
- linux通用链表
- 什么情况用ArrayList or LinkedList呢?
- Dubbo系列-扬帆起航
- 使用 Horoscope 测试 TiDB 优化器
- 聊聊claudb的importRDB
- 【17期】什么情况用ArrayList or LinkedList呢?
- YOLO V3网络结构解析
- 文献笔记二十一:PhenoGram可视化染色体上的信息
- 【动手学深度学习笔记】之对模型参数的访问、初始化和共享
- 【动手学深度学习笔记】之构造MLP模型的几种方法