Vue-eBookReader 学习笔记（初始化部分）

vue开发

初始化

1 搭建脚手架

  • 本来是输入指令 vue create project-name，但这样输入之后发现无法切换选项，所以将指令改为 winpty vue.cmd create project-name

  • 结束一堆配置之后，输入 npm run serve 启动服务器能成功启动后，输入 npm run build将项目打包，打开dist目录下的index.html，没有任何东西，打开控制台也是一堆bug，是因为路径问题，所以要进行修改：

    • 在根目录下添加一个vue.config.js文件，专门用来做vue中的配置
    • 在里面写上以下内容
module.exports = {
  //注意，这里不是baseUrl，而是publicPath
  publicPath: process.env.NODE_ENV === 'production'
  ? './'
  : '/'
}
  • 同时在package.json文件中也可以修改下面这两项来适应自己的习惯：
"dev": "vue-cli-service serve",
"build": "vue-cli-service build",

2、epubjs核心工作原理

  • epub电子书通过epubjs实例化一个Book对象，Book对象会对电子书进行解析；
  • Book通过renderTo方法生成rendition对象，rendition主要负责电子书的渲染；
  • 通过rendition可得到Theme对象，Theme负责电子书的样式和主题（字号主题）；
  • Book还能得到Location对象，负责定位，实现拖动进度条时快速定位的过程；
  • Book还能生成Navigation对象，用来展示电子书目录，并提供目录所在路径。

3项目准备工作

3.1 导入准备好的字体图标，并进行引用等一系列工作

3.2 下载好 sass相关的依赖包，cnpm i --save-dev node-sass sass-loader

3.3 引入字体，有下面两种引入方式：

  • 利用CSS引入：先将准备好的字体放到 public/fonts文件夹内，在public/index.html里添加link标签来引入 <link rel="stylesheet" href="<%= BASE_URL %>fonts/cabin.css">，再直接在文件中使用相应的字体即可
  • 利用JS引入：将准备好的字体放到 src/assets/fonts文件夹内，在main.js中利用js引入，即import './assets/fonts/cabin.css'

3.4 配置viewport配置

  • viewport用来设置用户在手机上的可视区域；
  • width=device-width：指定viewport宽度为设备宽度，initial-scale-1.0：指定默认缩放比例为1：1；
  • 通过maximum-scale和minimum-scale限定屏幕缩放比例为1：1，通过user-scalable限制用户对屏幕进行缩放。

3.5 rem配置

  • rem是css3新增的一个相对单位长度；
  • rem的值相当于根元素font-size值的倍数；
  • 这里在 DOMContentLoaded事件动态设置根元素font-size：
html.style.fontSize = window.innerWidth / 10 + 'px'

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

global.scss中设定了：

$ratio: 375 / 10 ;
@function px2rem($px) {
	@return $px / $ratio + rem;
}

这里$ratio值的设定是由用户决定的，可以根据自己的实际需要（或者UI设计稿）进行修改

这个值决定了px2rem输出的结果，如果设定为37.5，那么px2rem(20)，表示在375px宽度的屏幕下，显示为20px，计算方法如下：

  • 第一步：375px宽度的屏幕，1rem=37.5px（因为在App.vue中指定了html的font-size=375px/10=37.5px，所以1rem=37.5px）

  • 第二步：计算px2rem(20)=(20/37.5)rem

  • 第三步：将rem转化为px：(20/37.5) * 1rem = 20/37.5 * 37.5px = 20px

如果屏幕为414px，那么px2rem(20)的计算结果为：

px2rem(20)=(20/37.5)*41.4px=22.08px

从而实现了自适应布局，因为px2rem(20)会随屏幕宽度放大或缩小，这是一道数学题

直接输出结论：

  • $ratio的值可以由用户随意设定

  • 当设置为37.5时，表示以屏幕宽度375px为基准

  • 如果屏幕宽度大于375px，使用px2rem()方法计算出的值会等比例扩大

  • 如果屏幕宽度小于375px，使用px2rem()方法计算出的值会等比例缩小

4 vuex的使用(初步)

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，也就是帮助我们管理组件间传值，更加快捷。

4.1 具体步骤

vuex

  • 在组件内通过dispatch方法调用actions中定义好的方法：

    • this.$store.dispatch('setTest', 2)

  • 在actions定义好的方法中通过commit调用mutations里的方法：

    • setTest ({ commit, state }, newTest) {
  return commit('setTest', newTest)
}

  • 在mutations中定义好修改state中值的方法：

    • setTest (state, newTest) {
  state.test = newTest
}

  • 这里commit其实返回的是一个promise对象，所以在组件内通过dispatch调用setTest方法时就可以加上回调函数来处理成功或失败后的结果：

    • this.$store.dispatch('setTest', 2).then(
  () => {
    console.log(this.$store.state.book.test)
  }
)

4.2 vuex模块化

　　当需要管理的state中变量过多的时候，放到一个文件中就会显得十分臃肿且不便于管理，所以这里也用到了模块化的思想：

  • 在store文件夹下再创建一个modules文件夹，用于存放各模块单独的state；
  • 每个state是个对象，再用 export default 导出即可，再在index.js中引入该模块；
  • 同时在组件中使用的时候， 在state后面还要加上模块中定义的对象的名字。

4.3 线上调试vue

  • GitHub搜索vue-devtools，找到vuejs/vue-devtools/tree/master/shells/electron下的remote-tools；
  • 用npm install -g @vue/devtools安装后，输入vue-devtools，启动（注意要在index.html）中加上<script src="http://localhost:8098"></script>，这样就能和chrome提供的vue工具一样了（注意在线上发布的时候要将这句话删掉）

4.4 getters和mapGetters的使用

　　每次在组件里都通过 this.$state.book.test 来找vuex中的数据未免过于复杂了一点，可读性也不太好，所以这里通过getters和mapGetters组合起来，让子组件里可以通过 this.test直接找到这个变量。

  • 可以直接在store下的index.js文件内写getters也可以将getters作为一个新的组件放进modules，这里就用第一种方式；

  • Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算；

    • getters: {
  test: state => state.book.test
}

  • 接着在组件中，引入mapGetters，import { mapGetters } from 'vuex'；

  • 之前也说过，这个就像是store的计算属性，所以这里将mapGetters 得到的值放到组件的计算属性里，但是计算属性的值本身就是一个对象，所以要通过ES6的语法——扩展运算符：...来将mapGetters得到的对象中的变量合并到计算属性中：

    • computed: {
  //这样就可以在组件里通过 this.test直接访问，因为这个时候test以及变成组件里计算属性里的一个变量了
  ...mapGetters(['test'])
},

  • 那mapGetters到底是干什么的？mapGetters(keys)

    • keys是一个数组，它将遍历数组中的值，在getters中去寻找有无该key值对应的键，若存在则将其加入到要返回的对象中，具体举例如下：
const getter = {
  a: () => 1,
  b: () => 2
}
function fn (keys) {
  const data = {}
  keys.forEach(key => {
    //这里不直接写getter.hasOwnProperty(key)是因为这样代码不规范，原因见博客
    if (Object.prototype.hasOwnProperty.call(getter, key)) {
      data[key] = getter[key]
    }
  })
  return data
}
export default {
  computed: {
    //这样就会将fn中，有a b的值放进计算属性内
    ...fn(['a', 'b'])
  },
  mounted () {
    //由于a b已经是计算属性中的值，所以可以直接这样引用
    console.log(this.a, this.b)
  }
}

5 Nginx服务器搭建

  • 下载完毕后，进入文件夹 用命令行打开

  • start nginx：启动服务，成功后在浏览器输入 localhost即可打开

  • vi conf/nginx.conf查看配置文件，以及之后自己要搭建的服务器也在这里写

  • ./nginx.exe -s stop停止当前服务

  • 要自己搭建服务器，打开配置文件，在里面加上：

    • server {
	listen 8081;
}

  • ./nginx.exe -s reload重新加载配置文件

  • 修改文件完毕可以用 ./nginx.exe -t来检查语法

  • 继续修改配置文件以搭建服务器：

    • server {
        listen 8081; //监听端口
        server_name resource;
        root C:/Users/ARASHI/Desktop/resource; //文件路径，差点没害死我
        autoindex on; //是否查看resource文件列表
    }

  • 打开页面之后可以看到，就成功搭建了服务器：image-20200709085953751

  • 最后再加上跨域和缓存方面的配置：

    • location / {
                add_header Access-Control-Allow *;
        }
        add_header Cache-Control "no-cache, must-revalidate";

  • 注意，这里如果在resource目录下有index.html文件，首页会直接显示它，而不会去显示目录！

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/TRY0929/p/13586576.html