一、环境参数
框架: Vue 2.5
框架: Nodejs10.10.0
脚手架 :Vue-cli 3.0
构建工具: Webpack4.0
工具: npm6.4.1
二、项目准备
1. 环境配置
项目打包:npm run build
打包后会发现打开index是空白页面,在控制台中查看Network,可以发现css、js文件均报错,产生原因是路径的错误。
解决方法是配置生产环境的路径
(1)新建vue.config.js
(2)在文件中添加代码段
module.exports={
publicPath:process.env.NODE_ENV==='production'?'./':'/'
}
参考链接(侵删):
https://blog.csdn.net/zeroyulong/article/details/80225200
https://blog.csdn.net/purple_lumpy/article/details/88686573
2.字体图标准备
(1)先下载需要的svg图标(Font Awesome、阿里巴巴矢量图标库等)
(2)然后在icomoon中创建项目,导入所有图标,选中图标,点击右下角Generate Font F,然后下载字体图标压缩包
https://icomoon.io/app/#/select
(3)将字体图标文件夹font放入项目中,在main.js中全局引用字体图标的.css文件
参考链接(侵删):
https://blog.csdn.net/weixin_43756060/article/details/88596084
3.项目依赖包下载+准备Web字体
(1)安装sass预处理器
cnpm i --save-dev node-sass sass-loader
--save -dev
是指安装在devDependencies中
(2)准备Web字体
-
第一种方法:我们将web字体放到public目录下
这个方法我们能在index.html文件中通过link标签引用web字体的css文件
<link rel="stylesheet" type="text/css" href="<%= BASE_URL %>fonts/cabin.css"/> <link rel="stylesheet" type="text/css" href="<%= BASE_URL %>fonts/daysOne.css"/>
在App.vue文件中使用它
<template> <div id="app"> <span class="fonts">ABCDE</span> <router-view/> </div> </template> <script></script> <style scoped> .fonts{ font-family: 'Days One'; font-size: 20px; color: red; } </style>
-
第二种方法:我们将web字体文件放到assets目录下,在man.js文件中引用
main.js引入import './assets/fonts/cabin.css' import './assets/fonts/daysOne.css'
使用方式同上,主要是通过css设置font-family的值
4.viewport配置
在index.html文件中添加meta标签
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
content属性值 :
- width:可视区域的宽度,值可为数字或关键词device-width
- height:同width
- intial-scale:页面首次被显示是可视区域的缩放级别,取值1.0则页面按实际尺寸显示,无任何缩放
- maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别
- maximum-scale用户可将页面放大的程序,1.0将禁止用户放大到实际尺寸之上
- user-scalable:是否可对页面进行缩放,no 禁止缩放
关于viewport的详细描述可以参考以下:
https://blog.csdn.net/u012402190/article/details/70172371
5.rem设置
-
第一种方式:
在styles目录下新建mixin.scss文件,写一个公用的方法px2rem(),传入想要设置的px的值,转换成rem$ratio:375/10; //缩放比例 @function px2rem($px){ @return $px/$ratio+rem; }
-
第二种方式:
直接等比缩放,给字体设置最大上限document.addEventListener("DOMContentLoaded", () => { //初始化rem 浏览器原始1rem=16px,此时1rem为浏览器页面宽度/10 const html = document.querySelector("html"); var fontSize = window.innerWidth / 10; //给字体大小设置上限,防止字体过大 fontSize = fontSize > 50 ? 50 : fontSize; html.style.fontSize = fontSize + "px"; });
6.global.scss和reset.scss
(1)在main.js中引入global.scss
(2)global.scss引入各种css文件,这样main.js中只引用global.scss文件就好了
(3)在使用时import文件@import "./assets/styles/global";
参考链接:https://meyerweb.com/eric/tools/css/
7.搭建静态资源服务器
https://blog.csdn.net/qq_38143787/article/details/99979244
8.vuex
此部分容后再写