【项目-喵内0∞0记账-meowney-∞】项目复盘与总结以及部署

大纲

  • 1. 项目用到的知识点 §
  • 2. 用手机在本地网络调试页面 §
  • 3. 干掉手机浏览器地址栏 和 自带功能条(下巴) §
  • 4. 调试 §
  • 5. 幕享投屏连手机 §
  • 6. 项目描述怎么写 §
  • 7. 部署到 GitHub/Gitee & 设置 publicPath §
  • 8. 使用 serve §
  • 9. GitHub Pages 手动推送更新 §
  • 10. 设置二维码 提示手机扫码 §
  • 11. 修复:本地预览 dist 目录发现 JS 路径错误 §

[toc]


项目用到的知识点

  • 组件
    • TypeScript
    • 构造选项@Component
    • 类组件(class) + 装饰器(TS
    • 装饰器可以极大程度简化Vue组件中各种状态的声明
  • mixins(TS写法)
    • 创建标签export default class Labels extends mixins(tagHelper)
      • <button @click="createTag">添加新标签</button>
  • 类组件+TS装饰器 vue-property-decorator使代码逻辑的 高内聚,Vue 使代码逻辑 低耦合,TS装饰器写法:
    • prop 装饰器写法 @Prop 后期修改为@PropSync
    • method 选项在类组件中直接写成函数定义表达式
    • computed 选项在 在类组件写法 getter 语法: get currentTag() { return ...; }
    • watch 装饰器写法@Watch
    • v-model 装饰器写法@Model 后期修改为@ModelSync
    • $emit 装饰器写法@emit
  • slot插槽,子组件中占位,父组件中将内容填充到子组件双标签里,后期应用具名插槽
  • SVG symbols
  • ESLint屏蔽
  • localStorage 5~10M
  • sessionStorage 配合路由守卫
  • 编程思想
    • 表驱动编程 :class="{k: v, k: v}"
      • 对不同的按钮动态绑定对应事件
    • 模块化 Store Module
    • 重构技巧 抽离 提取 封装 混入 重用 功能集中归纳
    • 命名严谨性
  • Vue生态/全家桶
    • Vue-router hash SPA
      • hash路由
      • 路由守卫 + sessionStorage
    • Vuex
      • 模块化
    • VuePress在项目目录内写项目文档
  • 第三方库 Day.js

用手机在本地网络调试页面

同一局域网访问xxx:8080

WIn10 防火墙开启入站规则

  • yarn serve@vue/cli服务提供一个网络访问端口,例如Network: http://192.168.0.111:8080/
  • win10 打开防火墙高级设置
    • 设置入站规则
    • 设置端口8000-8888
    • 全部勾选应用
    • 设置名称
  • 手机输入url Network: http://192.168.*.*:****/
  • 注意PC和手机需要在同一wifi

Chrome远程调试工具

  • USB有线连接 Android 设备
  • 设备安装 Chrome for Android
  • window.alert不能在PC端显示,在手机端消失
  • conosle.log调试
  • debugger断点调试

类似

参考


腾讯 vConsole


调试

  • 使用 window.alert() 代替 console.log
  • 幕享投屏连手机

移动端调试神器 Whistle


一些功能性修改

干掉手机浏览器地址栏 和 自带功能条(下巴)


键盘文字改用icon图标

  • 还原默认标签
    • 判断标签是否为空
    • /src/store/modules/recordStore.ts添加状态createRecordError: null
    • Money.vuesaveRecord()里判断if (this.$store.state.createRecordError === null) {window.alert('已保存');}

项目描述怎么写

ReadMe.md

  • 喵内记账是一款基于 VueVue-RouterVuexTypeScript 的单页面的极简记账应用
  • 由本人参考开源UI,独立实现代码,期间遇到了很多 webpack svgVuexTypeScript 方面的问题,解决过程记录在本人的博客(最难的问题是…)
  • 源代码完全使用TypeScript实现,用到了类组件和装饰器语法
  • 源码地址
  • 预览地址

部署到 GitHub/Gitee & 设置 publicPath

yarn build

区别于webpack dev server yarn serve

使用serve

安装

  • yarn global add serve (或者yarn global add http-serve)

执行

  • serve -s dist
  • 运行打包好的资源 (区别于yarn serve 运行未打包的资源)
  • 检测是否正确打包的

GitHub Pages 手动推送更新

vue.config.js

  • 设置部署路径 仓库名
    • publicPath: process.env.NODE_ENV === 'production' ? '/meowney-0-website/' : '/',

创建deploy.sh 自动化脚本

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#!/usr/bin/env sh

# 当发生错误时中止脚本
set -e

# 构建
yarn build

# cd 到构建输出的目录下
cd dist

# 部署到自定义域域名
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 部署到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# 部署到 https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:xmasuhai/meowney-0-website.git master:gh-pages

cd -
  • 构建 yarn build
  • 新建页面预览的仓库: git@github.com:xmasuhai/meowney-0-website.git
    • 区别于存放源代码的仓库
  • 终端运行sh deploy.sh
  • 每次更改vue.config.js都需要重新运行deploy.sh

构建完成 设置预览

部署到码云,加快访问速度

  • 在项目 代码同一栏的从右数第二项 服务 栏中选 Gtiee Pages
  • 唯一要注意的是,码云免费版不支持自动更新代码,所以你每次部署之后,要登录码云的网站,手动点击「更新」按钮才能更新网页
  • 项目地址

设置二维码

  • PC端即显示二维码,提示手机扫码
  • 移动端即隐藏二维码
  • 判断屏幕宽度 document.documentElement.clientWidth

使用在线工具,将项目链接转为二维码图片

  • 草料

抽成QRCode.vue组件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<template>
  <div class="mask"
       @click="mask()"
       @touchmove.prevent
       :style="{'display':riseFlag?'block':'none'}">
    <div class="floatParts">
      <img src="../assets/qrcode.png" alt="QECode" class="qrcode"/>
      <span class="tipsText">请使用手机扫码打开</span>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import {Component} from 'vue-property-decorator';

@Component
export default class QRCode extends Vue {
  flag = true;
  flagOff = false;

  get riseFlag() {
    if (document.documentElement.clientWidth > 500 && !this.flagOff) {
      this.flag = true;
    } else if (this.flagOff) {
      this.flag = false;
    } else {
      this.flag = false;
    }
    return this.flag;
  }

  mask() {
    this.flagOff = true;
  }
}
</script>

<style lang="scss" scoped>
.mask {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: fixed;
  z-index: 998;
  .floatParts {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    z-index: 999;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    .qrcode {
      height: 200px;
      width: 200px;
      box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.25);
      }
    .tipsText {
      padding: 20px;
      text-align: center;
      color: #fff;
      text-shadow: 1px 1px 2px whitesmoke;
      }
    }
  }
</style>

页面部署到 GitHub 后,没有二维码展示出来。 这个时候你该怎么办?

  • 打开开发者工具的 Network(这个动作应该形成条件反射,任何网络问题都应该打开 Network,切记!)
  • 发现 qrcode.png404 错误(404 是红色的,你应该一眼就看到)
  • 404 错误是因为路径写错了(不要告诉我你不知道这句话,我会很失望的)
  • 这说明 '/qrcode.png' 这个路径不对,正确的路径'./qrcode.png'

修复:本地预览 dist 目录发现 JS 路径错误

使用 yarn build 得到 dist 目录后,再用 serve -s dist 然后在本地浏览器打开 http://localhost:5000 会看到如图报错

  • 这是因为在本地环境,这个 JS 的路径不对;但是在 GitHub Pages 里,这个 JS 的路径其实是对的。
  • vue.config.js,其实已经考虑了这个问题,它会在 production 环境(也就是 GitHub Pages 上)使用 /morney-3-website/ 作为路径前缀,在本地使用/ 作为路径前缀

如图

  • 但实际情况是,本地的 dist 使用了 /morney-3-website/,正确的前缀应该是 /
  • 为什么 vue.config.js 考虑了这个问题,还是会出现这个问题呢?

怎么解决这个问题

步骤如下:

  • yarn add cross-env(这个 cross-envWindows 用户必须的,其他系统的用户装了它也没事,不会有任何副作用)
  • package.json 里添加一个 "script"字段
    • 内容为"build:dev":"cross-env NODE_ENV=development yarn build"
  • 效果如图所示(注意行尾的逗号)
  • 使用 yarn build:dev 得到的 dist 即可在本地用 serve 预览
  • 使用 yarn build 得到的dist 即可在 GitHub Pages 上正常预览。

其他一些改进

添加Header组件解决 手机浏览器地址栏遮挡内容问题

  • 牺牲标题栏

限制各项内容的高度,处理滚动事件

  • 防止内容过多 挤下导航栏

统一处理 用户提示信息 功能性报错

  • createTagError
  • createRecordError
  • 注意初始时需要置空错误state.createTagError = null;

map 声明任意字符串作为 key-value 结构

  • const map: { [key: string]: string} = { 'tag name duplicated': '标签名重复了', };