阅读器实战开发准备（二）

一、环境参数

框架： 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

此部分容后再写