一、用到了哪些重要的知识

1、组件——传送门

对象写法：构造选项

 export default { data, props, methods, created, ...}

类组件+装饰器（JS or TS☆）

2、TS

（1）mixins

使用需求：减少重复
具体用法：传送门

（2）computed计算属性

在TS中要写成getter
根据依赖缓存，依赖不变不缓存

（3）watch

（4）props

3、.sync

4、v-model

5、插槽<slot/>

子组件在<template>标签里写<slot/>
父组件在使用子组件的时候在子组件里写的内容会替换<slot/>
具名插槽

6、SVG symbol 传送门

7、eslint

取消eslint监视

8、localStorage 一个浏览器的localStorage最多储存5-10M

9、表驱动编程——关于class 传送门

10、模块化思想如手写store

11、重构

优化了n个版本

12、命名的严谨性

组件开头大写

13、Vue Router

hash和history（不刷新页面）
使用Vue Router做的页面叫SPA（Simple Page App）

14、Vuex全局数据管理

比window store难用
模块化

15、给子组件加上原生事件传送门

16、如何在父组件里对子组件添加CSS样式

deep
给class加前缀classPrefix 传送门

17、共享CSS 传送门

18、全局的src/custom.d.ts 传送门

调试

（一）用手机调试

提前准备

打开防火墙与网络保护
高级设置
入站规则
新建规则端口 TCP 特定本地端口 8000-8888 名称8000-8888

步骤

手机和电脑处于同一局域网，用手机浏览器访问yarn serve的地址就可以了

手机常用浏览器

手机自带浏览器
chrome浏览器
UC浏览器
微信浏览器：在文件传输助手里输入地址，发送然后点开

（二）Chrome/Safari远程调试

（三）vconsole

万不得已才用

优化

发现手机浏览器地址栏很丑很占空间

搜索android
搜索到的方法都没用
所以改不了

改一下高度

Layout高度写死了100vh
不行，如果手机太短了，Layout里面的东西会挤到一起
不要写死啊！改成最小高度100vh

有的浏览器还需要用户往下滑才能看到底部导航

那就在用户一进入的时候我们帮用户往下滑
在src/main.ts

window.onload = function () {
  setTimeout(function () {
    window.scroll(0, 10000);
  }, 0);
};

点击OK新增一笔记账后需要显示记账成功

src/store/index.ts

 createRecord(state, record) {
      const record2: RecordItem = clone(record);
      record2.createdAt = new Date();
      state.recordList.push(record2);
      store.commit('saveRecords');
      window.alert('记账成功')
    },

如果一进去没有标签还是得给几个标签放在那里的

如果没有任何记账记录，那进入统计页面后本来应该显示记账信息的地方应该变为“没有相关记录”来提醒用户

statistics.vue

<template>
  <Layout>
    <Tabs class-prefix="type" :data-source="recordTypeList" :value.sync="type"/>
    
    <ol v-if="groupedList.length>0">   //如果groupedList有内容才会显示统计信息
      <li v-for="(group, index) in groupedList" :key="index">
        <h3 class="title">{{beautify(group.title)}} <span>￥{{group.total}}</span></h3>
        <ol>
          <li v-for="item in group.items" :key="item.id"
              class="record"
          >
            <span>{{tagString(item.tags)}}</span>
            <span class="notes">{{item.notes}}</span>
            <span>￥{{item.amount}} </span>
          </li>
        </ol>
      </li>
    </ol>
<div v-else class="noResult">  //如果groupedList没有内容那就是没有记账信息
  没有相关记录，快去记一笔账吧~
</div>
  </Layout>
</template>

在点击ok完成记账的时候，如果发现没有选择标签就提醒用户要要选择标签。而且记账成功要把备注清空

Money.vue

saveRecord() {
      if(!this.record.tags||this.record.tags.length===0){
        window.alert('请至少选择一个标签')
        return
      }
      this.$store.commit('createRecord', this.record);
      this.record.notes=''
    }

不能再电脑上使用，只能用手机

如果用户用电脑打开，就提示让他用手机打开，扫描二维码。

首先生成二维码

前提是这个项目已经全部完成，部署到GitHub上了，那就可以把预览地址用草料二维码生成二维码
qrcode.png放到public/img里

在mian.ts里写

项目信息

项目名称：少女心记账

项目描述

少女心记账是一款极简的记账应用，是一款基于Vue、VueRouter、Vuex、TypeScript的单页面应用。该项目由本人独立设计及实现，期间遇到了很多webpack和TypeScript方面的问题，项目实现全过程记录在本人的博客（给链接）里。源代码几乎完全用TypeScript实现，用到了很多装饰器语法。

源码地址：github.com/yybb717/mor…

预览地址：yybb717.xyz/morney-webs…

部署到github

新建两个GitHub仓库

morney (少女心记账项目的源代码仓库) 记得把源代码先push到这个仓库
morney-website (少女心记账项目预览仓库)

yarn build

会出现dist目录
点开终端给的网站，他会叫我们怎么做！

先检查dist能不能正确打包

yarn global add serve
serve -s dist

在 vue.config.js 中设置正确的 publicPath

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/morney-website/'        //预览仓库名
    : '/',

在项目目录下，创建内容如下的 deploy.sh (可以适当地取消注释) 并运行它以进行部署

#!/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:yybb717/morney-website.git master:gh-pages

cd -

以后只需要sh deploy.sh就可以一键部署了

原理

源代码仓库morney，里面有个src目录，
yarn build用来部署，之后src会被打包成一个dist目录，把dist目录上传到morney-website仓库的gh-pages分支
如果我们修改了源代码就要重新部署一次yarn build，又会得到一个新的dist目录，把新的dist目录上传到morney-website仓库的gh-pages分支。
但是我们写了一个脚本deploy.sh，把这些操作都写在里面了。之后我们之间sh deploy.sh

【项目】记账App（八）----总结