三、阅读器的开发--1、项目准备

1、项目准备

1.1、项目搭建

我用的脚手架是vue cli 5.0的，通过vue create 项目名称来创建的项目

上下箭头选的是最后那个，是指手动配置，然后回车

空格选中下面这些，然后回车

下图最后那个指我们所有的配置在哪里配置，第一个是指在单独的文件中配置，第二个是集成在package.json中，默认的时候是让它在package.json文件中，但是对初学者来说，若文件量大都集成在package.json中看的就不那么清楚，所以这里我选择的是第一个。这也是手动模式跟默认模式的区别，默认模式是选在package.json中

然后就是在创建项目了，等待创建完成即可

如下，然后我们通过http://192.168.112.42:8080/即可访问到

用vscode可以看到，用来vue的和config这两个目录已经没有了，只有src源码文件和public静态文件两个文件夹，整个项目的结构被大大简化了

下面我们来尝试一下打包功能，打开package.json，可以看到打包的指令仍然是build，所以我们可以通过npm run build来进行打包，如下已经打包完成，可以看到dist目录有我们所有的打包文件

我们打开文件夹dist下面的index.html，发现没有出现我们期望的网站内容，这是为什么

因为路径问题，我们无法通过下面这样的一个路径找到我们css文件。这时候就需要到vue.config.js，这个文件是用来做我们vue当中的一些配置。

我们给它配置如下图，通过process.env环境变量的NODE_ENV，当它等于production即开发模式时，我们将baseUrl设置为'./'，表示获取我们当前路径下，那么这样就可以正确获取我们css，而如果是测试时仍然如果'/'，配置完后尝试重新运行npm run build，再重新打开index.html即出现了如下浏览器这样了

1.2 我们尝试渲染出电子书

引入epub.js包，即npm i --save epubjs

像之前讲的那样，在HomeView中引入epub，并置成公共的，并且建一个类名为read的dom，以后电子书都是挂载到这里的

如下，我们实例化一个book对象，可以看到控制台中已经打印出该book对象了，注意read是id而不是class

如下

1.2 项目准备

·准备字体图标

·项目依赖包下载+项目配置

·准备Web字体

·viewport配置（可以禁止用户对浏览器进行缩放）

·rem设置+自适应布局实现思路

·global.scss和reset.scss（global.scss是全局样式文件，reset.scss是帮助我们重置html默认样式的文件

·引入vuex（对组件进行解耦，实现组件的状态管理）

·搭建静态资源服务器

·nginx安装

·配置文件

常见问题及处理方法

1.2.1 字体图标准备

在iconfont网站中找到需要的svg图标，svg下载到本地，然后拷贝到项目的assets下，如下再在main.js中把字体图标引入即可

怎么看要用哪个图标，打开下面这个index在浏览器中可以看到，直接用class="icon-xxx"即可在页面中显示出这个图标

实例：如下所示即可使用图标

那我们需要去调整这个图标的大小这些怎么整呢，直接在css的style标签中用.icon-xxx{}，一般用font-size:xx; color:xx;

1.2.2项目依赖包下载

安装node-sass和sass-loader即可，注意版本号问题即可

1.2.3 viewport配置和rem配置

在index.html的viewport中的content中加入maxmum-scale=1.0这是最大的缩放比例1.0，最小的可缩放比例minmum-scale=1.0，同时user-scalable=no也就是不允许用户进行缩放，这样的话用户在手机上就不会进行缩放了

然后我们来引入rem。我们只需要去取到html的根元素设置它的fontsize属性就可以了，如下

1.2.4 global.scss和reset.scss设置

为项目添加一个全局样式文件，如下在assets的styles下新建一个global.scss，然后在main.js中引入这个global.scss

然后在APP.vue中引入global.scss

你看即实现了，别忘记了要lang="scss"，因为默认是css，然后要引入这个global别忘记了

1.2.5 引入vuex

vuex就是解决多个组件共享状态的问题。

像我们之前多个组件尤其是存在层次关系的时候，我们传递参数调用方法就比较繁琐。比如孙子要用爷爷的参数，它得先传给dad再传给孙子，层层传递就比较麻烦，vuex就是解决这个问题的。

vuex中我们所有共享的数据都可以放在state中，一旦放到这里，所有的组件都可以很方便的取到，vuex的mutations就是用来改变state中的数据的方法，vuex中的actions是用来调用mutations方法的，可以通过异步的方式来调用。

若state中数据很多，那么state、mutations、actions都写在一起就可能很多很杂，所以vuex就为了解决这个问题给了我们模块化

我们一旦做vuex开发，vue的调试工具这个vue插件即下面这个对我们来说调试很重要

有时候你定义了一个对象A，然后对象里有属性B，然后你想访问到这个B的时候你需要this.$store.state.A.B就每次都要this.$store.A再点B才能访问到B就比较麻烦，vuex就提供了getters，通过这个getters.js中就可以之前需要通过this.$store.state.A.B才能访问B现在直接this.B就能访问B了，然后在store下的store.js中把这个getters.js引入进来，使用就是通过mapGetters这样的一个对象。