# VUE电子书

**Repository Path**: Actoress/vue_ebook

## Basic Information

- **Project Name**: VUE电子书
- **Description**: vue vuex vue-router ePub
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 2
- **Created**: 2018-12-21
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# VUE电子书
Vue电子书项目

------

## 使用框架
+ epubjs
+ vue2.5
+ vuex
+ vue-cli3.0
+ Webpack4.0
+ Nodejs10.10.0
+ npm6.4.1
+ web-storage-cache (浏览器缓存 localStorage 控制)
+ vue-i18n (国际化)

------

## 创建项目
```
    vue create project_name
```
选择手动模式  
>Manually select features

>勾选 Vuex 和 Vue-router(使用空格勾选)

>Use history mode for router? N

>选择 ESLint + Standard config

>Lint on save

>Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files

>Save this as a preset for future projects? N

------

## 启动项目
```
    npm run serve
```

------

## 打包项目
```
    npm run build
```
会生成一个dist目录，里面为build打包好的项目文件
直接本地运行项目会失败（提示找不到 css js img 等文件）
解决：在根目录中新建 vue.config.js
加入如下代码：
```
    module.exports = {
        baseUrl: process.env.NODE_ENV === 'production' ? './' : '/'
    }
```
发布的时候，需要修改 baseUrl

------

## 【重要】使用 postcss-pxtorem 将 px 自动转化为 rem
```
1.安装依赖
    npm install postcss-pxtorem -D

2.设置规则（更改postcss.config.js,该文件为使用vue-cli3自动创建的文件）
module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 75,//结果为：设计稿元素尺寸/75，比如元素宽750px,最终页面会换算成 10rem
      propList: ['*']
    }
  }
}

3.引入通用的flexible.js
```
------

## 使用图形界面
```
    vue ui
```

------

## 项目依赖
低版本的node需要安装对应的兼容版本的package
```
    npm install --save epubjs
    npm install --save-dev node-sass sass-loader
```

------

## 网络资源
reset.css
```
    https://meyerweb.com/eric/tools/css/reset/
```

------

## 安装 Vue 远程调试工具
```
    npm install -g @vue/devtools
```

------

## nginx 搭建静态资源服务器

启动nginx
```
    sudo nginx
```

停止nginx
```
    sudo nginx -s stop
```

重新加载（修改配置文件后，nginx必须先启动）
```
    sudo nginx -s reload
```

检查语法是否正确
```
    sudo nginx -t
```
提示内容为如下，表示配置正常
>nginx: the configuration file /usr/local/etc/nginx/nginx.conf syntax is ok

自己定义新的服务，在配置文件中加入  
配置文件位置 /usr/local/etc/nginx/nginx.conf  
配置项结束要加 ;   
```
    server {
        listen 8081; # 端口号
        server_name resouce; # 服务名称
        root /Users/wujiawei/Desktop/resouce; # 文件目录
        autoindex on; # 浏览文件目录下的文件列表
        location / {
            add_header Access-Control-Allow-Origin *; # 添加跨域支持
        }
        add_header Cache-Control "no-cache, must-revalidate"; # 不允许缓存
    }
```
如果访问新的服务，出现403，说明没有访问权限
修改 nginx.conf
```
原内容：
    #user  nobody;
修改为：
    user wujiawei owner; # 加入拥有者的名称
``` 

------

## 使用 vue-router 实现动态路由
**在对应页面中通过 this.$route.params.fileName 获得对应路径**

**在 router.js 中**
**在配置子路由path时，在变量名前面加上如下代码:**
```
{
    path: '/ebook',
    component: () => import('./views/ebook/index.vue'), // 路由主文件
    // 子路由
    children: [{
        path: ':fileName',
        component: () => import('./components/ebook/EbookReader.vue')
    }]
}
```

------

## vue 实现常用代码混用
常用代码混用  
在 /src/utils/mixin.js  
写入需要复用的代码  
```
import { mapGetters } from 'vuex'

export const ebookMixin = {
  computed: {
    ...mapGetters([
      'fileName',
      'menuVisible'
    ])
  }
}
```
在 vue 文件中，通过如下代码将代码加入进去
```
import { ebookMixin } from '@/utils/mixin.js'
export default {
    mixins: [ebookMixin],
}
```

## vue-cli 3.0 的环境变量
<a href="https://cli.vuejs.org/zh/guide/mode-and-env.html">vue-cli 3.0 的环境变量API文档</a>  
在根目录中，新建 .env.development 文件  
**一定要使用VUE_APP开头**
```
    将以下代码写入文件中
    VUE_APP_RESOURCE_URL=http://10.0.0.6:8081

    页面通过 process.env.VUE_APP_RESOURCE_URL 调用
```

------

## vue 实现常用代码混用

mousedown.left="fn"  鼠标左键点击时调用