喵记账-项目总结

  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>
  1. @无法识别src目录
    解决方法:在webpack里手动配置webpack文件,路径为 'xxx\node_modules@vue\cli-service\webpack.config.js'

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

  3. 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布局
  1. 动态选中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
      }
    }
  1. 改为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;
    }
  }
  1. 写Vue组件的三种方式
    1. 用js对象
  export default {name,props,data, mounted,methods,...}
  
  1. 用ts类 <script lang="ts">
@Component
export default class Types extends Vue {
    xxx: string = 'hi';
    @Prop(Number) xxx: number | undefined;
  1. 用js类 <script lang="js">
@Component
export default class Types extends Vue {
    xxx = 'hi';
  1. vue里面的循环
 <li v-for="(u,index) in displayUsers" :key="index">{{u.name}} - {{u.gender}}</li>
// 对 displayUsers进行for循环输出
  1. v-modle
:value = "x"
@input = "x = $event.target.value"

=

v-modle = "x"
  1. 不小心遇到了git 游离的 head 状态
    解决方法:游离的 head 状态就是现在位于一个匿名分支,所有提交都不在任何分支上,如果丢失会很严重,需要把内容提交到分支上
  2. 如何把js文件修改为ts
    1. 修改后缀为ts
    2. 改掉所有报错,基本就是类型
    3. 如果类型是自定义的,就新建 custom.d.ts 把类型文件写在全局里,整个项目都可以使用这个类型
  3. 使用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;
  }
  1. 部署到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
  1. 在项目里使用图片部署到github无法生效的问题
    解决办法: 其实就是路径问题,把图片路径改为相对路径
  img.src = './qrcode.png';
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,734评论 6 505
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,931评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,133评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,532评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,585评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,462评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,262评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,153评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,587评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,792评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,919评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,635评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,237评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,855评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,983评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,048评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,864评论 2 354

推荐阅读更多精彩内容