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文件，首页会直接显示它，而不会去显示目录！