Statistics页面布局

HTML布局

  <Layout>
    <Tabs class-prefix="type" :data-source="typeList" :value.sync="type"/>
  </Layout>

ts

  export default class Statistics extends Vue {
    type = '-';
    typeList = [
      {text: '支出', value: '-'},
      {text: '收入', value: '+'},
    ];
  }

深度作用选择器

希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，可以使用 >>> 操作符; 有些像 Sass 之类的预处理器无法正确解析 >>>，可以使用 /deep/ 或 ::v-deep 。

<style scoped lang="scss">
  ::v-deep .type-tabs-item {
    background: white;
    &.selected {
      background: #C4C4C4;
      &::after {
        display: none;
      }
    }
  }
</style>

抽离 typeList

//Object.freeze() 方法可以冻结一个对象。被冻结对象不能添加新的属性，不能删除已有属性
//  recordTypeList.ts
export default Object.freeze([
  {text: '支出',value:'-'},
  {text:'收入',value:'+'}
])

Money.vue 引用 Tabs

<Tabs :data-source="recordTypeList" :value.sync="record.type"/>

import Tabs from '@/components/Tabs.vue';
import recordTypeList from '@/constants/recordTypeList';
recordTypeList = recordTypeList;

Statistics.vue

<Tabs class-prefix="type" :data-source="recordTypeList" :value.sync="type"/>

import intervalList from '@/constants/intervalList';
import recordTypeList from '@/constants/recordTypeList';
recordTypeList = recordTypeList

发布

yarn build 
//本地预览
yarn global add serve
# -s 参数的意思是将其架设在 Single-Page Application 模式下
serve -s dist

GitHub Pages手动推送更新

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

如果将项目部署到 https://github.com/yafanison/<REPO>)，可将 publicPath 设为 "/<REPO>/"。仓库名字为“ledger-website”，那么 vue.config.js 的内容应如下所示：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/ledger-website/'
    : '/',

创建内容 deploy.sh

#!/usr/bin/env sh

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

# 构建
npm run 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:yafanisonya/ledger-website.git master:gh-pages

cd -