喵记账-项目总结

1. svg图标不会自动换色
   解决方法：删除svg图标中的fill属性，分别设置点击前的颜色和点击后的颜色
2. 引入单独文件时的插槽
   使用<slot/>，在组件里

-- Layout --
<template>
  <div class="nav-wrapper">
    <div class="content">
      <slot/>
    </div>
    <Nav/>
  </div>
</template>

意思是在slot位置插入内容，例如

-- Money --
<template>
  <Layout>
    <p>Money.vue</p>  // Layout中slot处插入<p>Money.vue</p> 
  </Layout>
</template>

3. @无法识别src目录
   解决方法：在webpack里手动配置webpack文件，路径为 'xxx\node_modules@vue\cli-service\webpack.config.js'

4. <style lang="scss" scoped>
   使用scoped会自动给class类加上属性名，所以每个单独的页面都不用再重新命名

5. css居中布局时，最后一排内容不够无法左对齐
   如图所示：
   

   无法左对齐.png
   
   解决办法：
   1. 增加父盒子，设置父盒子宽度为刚好一排内容的宽度，在这里会遇到最右边一个自动换行的问题，是因为给元素设置了margin，内容宽度超出，需要在最后一个元素设置负margin。
      该方法缺点：内容固定，不够响应式，在pc等大屏幕端也只有那一块，而且需要在js给最后一个元素增加类，非常麻烦
   2. 使用justify-content:flex-start，左对齐，再手动设置padding
      该方法缺点：不够响应式，每个人屏幕尺寸不同，容易歪
   3. 使用grid布局，推荐这种办法，grid布局就是为这种情况而存在
      该方法缺点：有许多旧款浏览器不支持

.current {
     padding-top: 100px;
     display: grid;
     flex-wrap: wrap;
     justify-content: center;
     grid-template-columns: repeat(auto-fill, 80px);

grid布局

6. 动态选中class
   使用 :class

      <li :class="type === '-' && 'selected'" @click="selectType('-')">支出</li>
      <li :class="type === '+' && 'selected'" @click="selectType('+')">收入</li>
---
       methods: {
      selectType(type) {
        if (type !== '-' && type !== '+') {
          throw new Error('type is unknown')
        }
        this.type = type
      }
    }

7. 改为ts

  import Vue from 'vue';
  import {Component} from 'vue-property-decorator';

  @Component  //export内容自动识别为vue组件
  export default class Types extends Vue {
    type = '-';  //自动变为data
    selectType(type) {  //自动变为methods
      if (type !== '-' && type !== '+') {
        throw new Error('type is unknown');
      }
      this.type = type;
    }
  }

8. 写Vue组件的三种方式
   1. 用js对象

  export default {name,props,data, mounted,methods,...}
  

2. 用ts类 <script lang="ts">

@Component
export default class Types extends Vue {
    xxx: string = 'hi';
    @Prop(Number) xxx: number | undefined;

3. 用js类 <script lang="js">

@Component
export default class Types extends Vue {
    xxx = 'hi';

9. vue里面的循环

 <li v-for="(u,index) in displayUsers" :key="index">{{u.name}} - {{u.gender}}</li>
// 对 displayUsers进行for循环输出

10. v-modle

:value = "x"
@input = "x = $event.target.value"

=

v-modle = "x"

11. 不小心遇到了git 游离的 head 状态
    解决方法：游离的 head 状态就是现在位于一个匿名分支，所有提交都不在任何分支上，如果丢失会很严重，需要把内容提交到分支上
12. 如何把js文件修改为ts
    1. 修改后缀为ts
    2. 改掉所有报错，基本就是类型
    3. 如果类型是自定义的，就新建 custom.d.ts 把类型文件写在全局里，整个项目都可以使用这个类型
13. 使用classPrefix，来动态区分使用的页面
    在组件声明

//Types.vue
// template
  <div>
    <ul class="types">
      <li :class="{selected:value==='-',[classPrefix+'-item'] :classPrefix}" @click="selectType('-')">支出</li>
      <li :class="{selected:value==='+',[classPrefix+'-item'] :classPrefix}" @click="selectType('+')">收入</li>
    </ul>
  </div>
//  @Component
    @Prop(String) classPrefix?: string;

在不同页面使用

// Statistics.vue
  <Layout>
    <Types :value.sync="type" class-prefix="xxx"/>
  </Layout>

// style
 ::v-deep .zzz-item{  //  ::v-deep ，是在使用 scoped 时，只影响当前的组件
    background:white;
  }

14. 部署到github

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

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

• 在项目目录下，创建内容如下的 deploy.sh 并运行它以进行部署：

2. 在项目目录下，创建内容如下的 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:ShigureRain/moneycat-website.git master:gh-pages

cd -

• 运行 sh deploy.sh

15. 在项目里使用图片部署到github无法生效的问题
    解决办法： 其实就是路径问题，把图片路径改为相对路径

  img.src = './qrcode.png';