[yishen] 小慕读书web端学习笔记

课程常用链接

【前奏-课程】快速入门Web阅读器开发

【小慕读书web端】Vue 实战商业级读书Web APP 全面提升技能

【epub图书免费下载站点 · 中文书】http://www.ziliaoh.com/epub.html

【项目代码gitee】https://gitee.com/yishen_yishen/vue-ebook 如果对你有帮助欢迎点个 star

【md格式 源文档下载】下载链接 在线阅读可能会乱码(我知道是编码问题，但在七牛云里不知道怎么修改)，请下载后查看

阅读器原理课程-免费课

概览

知识点脑图

阅读器工作原理

• epubjs文档

环境搭建

vue-cli环境

• 环境准备

iMac-Pro:code yishen$ node -v
v14.0.0
iMac-Pro:code yishen$ npm -v
6.14.5
iMac-Pro:code yishen$ vue -V
2.9.6

• 离线版安装

  • GitHub下载webpack 下载到桌面，然后解压

  cd ~
  cd .vue-templates/
  cp -R ~/Desktop/webpack-develop webpack # -R 是将目录下所有文件复制到新目录webpack下
  cd ~/Desktop 			# 项目路径，后面会在此路径下新建项目文件夹
  vue init webpack --offline ebook-read # 新建ebook-read项目，并初始化
  

• 启动vue项目

npm run dev

sass支持

npm install node-sass sass-loader --save-dev

epubjs扩展

npm install epubjs --save

项目配置

viewport配置

• viewport用来设置用户在手机上的可视区域

• width=device-width：指定viewport宽度为设备宽度；inital-scale=1.0：指定默认缩放比例为1：1

• 通过maximum-scale和minimun-scale限定屏幕缩放比例为1：1，通过user-scalable限制用户对屏幕进行缩放

• 项目根目录Index.html文件，内部

<meta name="viewport" content="width=device-width,initial-scale=1.0,
    maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

rem配置

• rem是css3新增的一个相对长度单位

• rem相当于根元素font-size值的倍数

  • 2rem = 根元素font-size *2

• DOMCotentLoaded事件动态设置根元素font-size

  html.style.fontSize = window.innerWidth / 10 + 'px'
  

• /src/App.vue文件,<script>内部

  document.addEventListener('DOMContentLoaded', () => {
    const html = document.querySelector('html')
    let fontSize = window.innerWidth / 10
    fontSize = fontSize > 50 ? 50 : fontSize
    html.style.fontSize = fontSize + 'px'
  })
  

reset.scss和global.scss

• Reset.scss是为了消除不同浏览器默认样式的不一致性
• Global.scss规定整个站点的公共样式，公共方法和公共参数
• 实现px2rem方法，将px转化为rem
• Reset.scss代码 参考链接

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
html,body{
  width: 100%;
  height: 100%;
  font-family: 'PingFangSC-Light','PingFang SC','StheitiSC-Light',
    'Helvetica-Light','Arial','sans-serif';
}

• global.scss代码

@import 'reset';

// 1rem = fontSize px
// 1px = (1 / fontSize)rem
$fontSize:37.5;

@function px2rem($px) {
  @return ($px / $fontSize)+rem;
}

@mixin center() {
  display: flex;
  justify-content: center;
  align-items: center;
}

web端小慕读书-付费课

环境搭建

Node.js环境

nvm工具的使用

• nvm作用：node version manger,node版本管理工具

• nvm github地址https://github.com/nvm-sh/nvm

• nvm安装

  curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
  

nvm常用命令

• 换淘宝源

export NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node

• 其他

nvm install node // 安装最新版nodejs
nvm install 10.10.0 // 安装指定版本
nvm use 10.10.0 		// 切换到指定版本

Vue CLI 3.0环境搭建

• 卸载老版本npm unistall vue-cli -g
• 安装新版本 npm install -g @vue/cli
• 原型开发 npm install -g@vue/cli-service-global
• npm i -g @vue/cli-service-global

vue.config.js文件配置

• 作用：解决production模式下路径问题(虽然我没看懂代码╮(￣▽￣)╭)

• 注意：baseUrl在Vue CLI 3.3被废弃，新版本使用publicPath

module.exports = {
   
  publicPath: process.env.NODE_ENV === 'production'
    ? './'
    : '/'
}

Vue-remote-devtools调试工具

此工具与Chrome插件功能相同，一个是浏览器扩展，一个独立分离出来，可以不安装

GitHub地址

• 安装 npm install -g @vue/devtools 添加 --verbose可以查看安装进度，以及请求地址

  npm 配置

Electron，安装上述工具时，可能会需要安装这个Electron，不过由于网络的原因，会下载失败。

修改 ~/.npmrc 文件，添加一行ELECTRON_MIRROR=“https://cdn.npm.taobao.org/dist/electron/”

• 添加<script src="http://localhost:8098"></script> 到/public/index.html
  • 项目上线时，要删除掉这句话

epubjs扩展

npm i --save epubjs

sass扩展

npm i --save-dev node-sass sass-loader

sass报错：this.getResolve is not a function

• 版本过高引起的，或其他低版本的不适用高版本sass

• 可降低sass版本解决

  npm uninstall sass-loader
  npm i -D sass-loader@7.3.1
  

web字体引入

谷歌字体api

• 谷歌字体api https://developers.google.com/fonts/docs/css2

使用方法

[三方汉化]谷歌字体api

• 谷歌中文字体api(第三方汉化)：地址

font-family: 'Hanalei Fill', cursive;
font-family: 'Kirang Haerang', cursive;
font-family: 'Merriweather', serif;
font-family: 'MedievalSharp', cursive;
font-family: 'Ranga', cursive;

Nignx搭建静态服务器

Nginx.org

• mac上安装Nignx需要先安装brew

  • /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
    

  • 一般来说会由于网络原因，安装失败(挂代理也不能使用：git默认不走代理，即使能正常访问GitHub，clone仓库时也非常慢，所以需要为git配置代理)

  • 国内下载方式/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

  • 参考链接，知乎 , gitee

• brew 安装nginx

brew install nginx

• 运行nginxsudo nginx

  配置文件地址：/usr/local/etc/nginx/nginx.conf

• 停止运行 sudo nginx -s stop

• 重新加载 sudo nginx -s reload

外链配置

项目根目录新建.env.development文件和 .env.production 文件

VUE_APP_RES_URL=http://127.0.0.1:9001/

• 外部引用举例

• initGlobalStyle () {
       
        console.log(this.defaultTheme)
        addCss(`${
         process.env.VUE_APP_RES_URL}/themes/theme_eye.css`)
      },
  

nginx配置相关

• 需将 autoindex on; 才可以访问目录

nodejs环境接口搭建、相关知识点

• 新建node-imooc-ebook文件夹，app.js入口文件

• npm init初始化npm项目，生成package.json文件

• 安装express，npm i express -S ；api参考手册

• 安装mysql操作库 npm i mysql -S

• Nodemon 插件

  • 每次修改完文件，需要重新node app.js 才能执行

    Nodemon app.js 在项目保存后自动重新运行项目

• cors-跨域问题

什么是跨域：链接

npm i -S cors

app.js中

const cors = require('cors')
app.use(cors())

知识点

vue

vue引用中的@符号

地址中的@符

• 当引用文件时import '@/assets/styles/global.scss'

• @代表/src

  • 可以在 build/webpack.base.conf.js中设置

  

import前面的@符

script中的import是js的语法, 是在js中去引用css文件

style中的@import是stylus的语法，是在css中引用css文件

参考链接：详解vue中常用的几种import引入方式

​ 备用链接

transition动画原理

• 使用v-show动态显示或隐藏元素时，会触发过渡动画
• transition需要指定name，并包裹一个包含v-show的div
• vue会为transition包裹的div动态添加class，公6种

transition

• 代码实现

• html部分。src/Ebook.vue，外围使用包裹，带上name属性,被包裹的部分要有vshow或者vif

  <transition name="slide-down">
    <!-- 下面就是要展示动画的部分 -->
        <div
          class="title-wrapper"
          v-show="isTitleAndMenuShow"
        >
          <div class="left">
            <span class="iconfont iconbackarrow"></span>
          </div>
          <div class="right">
            <div class="icon-wrapper">
              <span class="iconfont iconbooks"></span>
            </div>
            <div class="icon-wrapper">
              <span class="iconfont iconiconfontcart-copy"></span>
            </div>
            <div class="icon-wrapper">
              <span class="iconfont iconi-more"></span>
            </div>
          </div>
        </div>
      </transition>
  

  
* css 部分
  
  ~~~scss
  .slide-down-enter-to,
  .slide-down-leave {
    transform: translate3d(0, 0, 0);
  }
  .slide-down-enter-active,
  .slide-down-leave-active {
    transition: all 0.3s linear;
  }
  .slide-down-enter,
  .slide-down-leave-to {
    transform: translate3d(0, -100%, 0);
  }

• 更多关于过渡、动画 官方说明

transition-group

参考链接-vue.js

作为多个元素/组件的过渡效果。 渲染一个真实的 DOM 元素(通过tag指定)

• 代码演示 src/components/shelf/ShelfList.vue

<template>
  <div class="shelf-list">
    <transition-group
      name="list"
      tag="div"   // tag='div'，这该元素渲染文div
      id="shelf-list"
    >
      <div
        class="shelf-list-item"
        v-for="(item, index) in shelfList"
        :key="index"
      >
        ......
      </div>
    </transition-group>
  </div>
</template>

• :key引发的bug

bug描述：动画没有效果，动画的类没有加到dom上面

// 原始代码,没有任何效果，dom上没有添加.list-move,.list-leave-active等类名
<transition-group
      name="list"
      tag="div"
      id="shelf-list"
    >
      <div
        class="shelf-list-item"
        v-for="(item, index) in shelfList"
        :key="index"
      >
        ......
      </div>
</transition-group>

// 修改后代码，效果正常
<transition-group
      name="list"
      tag="div"
      id="shelf-list"
    >
      <div
        class="shelf-list-item"
        v-for="(item) in shelfList"
        :key="item.id" // 修改了这里
      >
        ......
      </div>
</transition-group>

只是把:key由原先的index修改为了item.id，我也不知道什么原因