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 具体步骤

• 在组件内通过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文件列表
        }
    

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

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

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

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