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

大纲链接 §

[toc]

项目用到的知识点 ⇧

类组件（class） + 装饰器（TypeScript），使用第三方库：类组件 + TS装饰器 vue-property-decorator
- 装饰器可以极大程度简化Vue组件中各种状态的声明，如声明组件@Component({})
mixins(TS写法)
- 创建标签export default class Labels extends mixins(tagHelper)
  - <button @click="createTag">添加新标签</button>
使代码逻辑的 高内聚，Vue 使代码逻辑 低耦合，选项写法对比 TS装饰器写法：
- 构造选项@Component，可添加组件名
- prop 装饰器写法 @Prop 后期修改为@PropSync
- method 选项在类组件中直接写成ES6的类中的函数声明 fn() {}
- computed 选项在在类组件写法 getter 语法： get currentTag() { return ...; }
- watch 装饰器写法@Watch
- v-model 装饰器写法@Model 后期修改为@ModelSync
- $emit 装饰器写法@Emit
- 提供/注入@Provide、@Inject
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下

远程调试 ⇧

USB有线连接 Android 设备
设备安装 Chrome for Android
win11 安卓虚拟机或 M芯片 Mac IOS应用
注意：
- window.alert不能在PC端显示，在手机端消失
- debugger断点调试，不推荐
- console.log调试，推荐
调试浏览器在一台设备上互斥，必须关闭一种浏览器才可打开另一种显示调试

参考

腾讯 `vConsole` ⇧

移动端调试神器 `Whistle` ⇧

移动端调试神器 Whistle

一些功能性修改 ⇧

干掉手机浏览器地址栏和自带功能条（下巴） ⇧

搜安卓浏览器隐藏地址栏
Android browser hide navigation bar
移动端滚动隐藏浏览器地址栏和工具栏
自动滚动到页面底部
- window.onload = () => {setTimeout(()=> {window.scrollTo(x:0, y: 10000)}, 0)};

键盘文字改用`icon`图标 ⇧

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

项目描述怎么写 ⇧

ReadMe.md

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

部署到 `GitHub/Gitee` & 设置 `publicPath` ⇧

yarn build

生产环境部署
vue/cli部署
生成/dist目录

区别于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

构建完成设置预览 ⇧

自动开启GitHub Pages 分支
预览页面1

部署到码云，加快访问速度 ⇧

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

参考

vue cli GitHub 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.png 是 404 错误（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-env 是 Windows 用户必须的，其他系统的用户装了它也没事，不会有任何副作用）
在 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': '标签名重复了', };

参考文章

作者： Joel
文章链接：
版权声明
非自由转载-非商用-非衍生-保持署名

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

文章目录

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

项目用到的知识点 ⇧

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

同一局域网访问`xxx:8080` ⇧

远程调试 ⇧

腾讯 `vConsole` ⇧

移动端调试神器 `Whistle` ⇧

一些功能性修改 ⇧

干掉手机浏览器地址栏和自带功能条（下巴） ⇧

键盘文字改用`icon`图标 ⇧

项目描述怎么写 ⇧

部署到 `GitHub/Gitee` & 设置 `publicPath` ⇧

使用`serve` ⇧

GitHub Pages 手动推送更新 ⇧

配置`vue.config.js` ⇧

创建`deploy.sh` 自动化脚本 ⇧

构建完成设置预览 ⇧

部署到码云，加快访问速度 ⇧

设置二维码 ⇧

使用草料网生成二维码 ⇧

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

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

其他一些改进 ⇧

参考文章

相关文章

文章目录

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

项目用到的知识点 ⇧

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

同一局域网访问xxx:8080 ⇧

远程调试 ⇧

腾讯 vConsole ⇧

移动端调试神器 Whistle ⇧

一些功能性修改 ⇧

干掉手机浏览器地址栏 和 自带功能条（下巴） ⇧

键盘文字改用icon图标 ⇧

项目描述怎么写 ⇧

部署到 GitHub/Gitee & 设置 publicPath ⇧

使用serve ⇧

GitHub Pages 手动推送更新 ⇧

配置vue.config.js ⇧

创建deploy.sh 自动化脚本 ⇧

构建完成 设置预览 ⇧

部署到码云，加快访问速度 ⇧

设置二维码 ⇧

使用草料网生成二维码 ⇧

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

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

其他一些改进 ⇧

参考文章

相关文章

同一局域网访问`xxx:8080` ⇧

腾讯 `vConsole` ⇧

移动端调试神器 `Whistle` ⇧

干掉手机浏览器地址栏和自带功能条（下巴） ⇧

键盘文字改用`icon`图标 ⇧

部署到 `GitHub/Gitee` & 设置 `publicPath` ⇧

使用`serve` ⇧

配置`vue.config.js` ⇧

创建`deploy.sh` 自动化脚本 ⇧

构建完成设置预览 ⇧

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

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