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这样的一个对象。
1.2.6搭建静态资源服务器
nginx.org官网中可以下载，nginx是俄罗斯开发的一个http的web服务器，它特点就是占用内存少运行速度快，我们经常可以把它用做反向代理也可以做静态资源的管理。下图这个nginx.conf是我们nginx配置文件，现在我们去配置
http表示一个http服务，里面的server，server代表启动一个端口提供一项服务，默认是打开80端口。端口中直接输入nginx，就可以直接来启动nginx服务器，nginx -s stop是关闭nginx服务器。到下载的这个nginx文件下，然后直接输入nginx即打开nginx服务器
然后去浏览器访问localhost:80，即可看到下面，则说明nginx启动成功
下面我们自己来建服务，指向我们自己的静态资源
我们vue端口号也是8080，所以我们改成9000，避免nginx启动失败
然后我们自己再建一个server，然后注意我们输入nginx -s reload重新加载一下，再去访问80端口不行了，去访问9000端口可以，访问这个8081也可以
我们继续修改配置文件，同时建个新的文件夹，如下面的sresoure，如图把文件路径传进去，注意不要有/r这样的路径，有的话改一下文件夹名称开头不要是r-
然后再次访即可看到index的目录，往刚才建的sresoure新建个text.txt，然后再去访问即可看到如下，那个text.txt也会加在这个目录下啦
