记账项目完成后小结

wbh爱吃西瓜
1,437 阅读2分钟

近期完成了一个记账的项目，在学习和制作过程中遇到了不少的问题，记录一下

1、src = @

<script>
    import x from '../components/Test.vue'
    // = import x from '@/components/Test.vue'
</script>

2、在 style 中使用 @ 来代表 src 需要使用 ~@

<style lang="scss">
    @import "~@/assets/styles/test.scss"
</style>

3、报错：Require statement not part of import statement.(@typescript-eslint/no-var-requires)

- 在 eslintec.js 文件中添加：

module.exports = {
  ...
  rules: {
    ...
    '@typescript-eslint/no-var-requires': 0,
  }
}

4、一次性 import 一个目录中同一个后缀的文件

let importAll = (requireContext: __WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext)
try {
  importAll(require.context('../assets/icons', true, /\.svg$/))
}catch (error){
  console.log(error);
}

5、SVG 存在无法改变颜色的问题：

- 看了源文件，发现在 path 标签中存在一个 fill 属性，用于定制这个 icon 的颜色，导致了我设定颜色时，无法同步到这个 icon 标签上。这个问题可以通过把这些 fill 属性全部删除的方法来进行更新，但是每次都要一个一个删除实在太过于麻烦了，于是在网上搜了很多类似的博客等问题，然后找到了解决方法，使用了 svgo-loader 来阻止这个 fill 属性的渲染，这样就不用在以后导入 SVG 文件时，一个一个修改它的 fill 属性

5、height = line-height 时可以实现垂直居中。但是要确定只有一行内容

6、查询 typescript 的版本：npm info typescript version

7、TypeScript 的特点

  1. 自动提示更加智能化
  2. 不能随便写 .toString()
  3. 编译报错，使 typescript 无法变成 JS ，更加的严谨
  4. 报错只会显示在终端中，不会出现在浏览器的控制台中

8、如何使用 TypeScript 来生成 Vue 组件

import {Component,Prop} from 'vue-property-decorator'
 
@Component  //告诉 typescript ，export...是 Vue 的一个组件
export defaulty class Types extends Vue{
    type = '-';
    @Prop(Number) xxx: number | undefined;
    // Prop 告诉 Vue , xxx 不是 data 是 prop
    // Number 告诉 Vue , xxx 运行时是个 Number
    // xxx 属性名
    // number | undefined 告诉 typescript xxx 的编译时类型
    mounted(){
      console.log(this.xxx.xxx);
      // 编译错误
      // 错误一：xxx 可能是 undefined
      // 错误二：xxx 类型为 number 没有 xxx 属性
    }
    
    // mounted 的正确写法
    mounted(){
        if(this.xxx === undefined){
            console.error('undefined')
        }else{
            console.log(this.xxx.toString())
        }
    }
}

9、TypeScript 的本质：

10、写 Vue 组件的三种方式（单文件组件）

  1. 用 JS 对象
export default { data, props , methods, created, ...}
  1. 用 TypeScript 类
<script lang="ts">
import {Component,Prop} from 'vue-property-decorator';

@Component 
export default class XXX extends Vue {
    yyy:string = 'hi'
    @Prop(Number) zzz: number | undefined;
}
<script>
  1. 用 JS 类
<script lang="ts">
import {Component,Prop} from 'vue-property-decorator';

@Component
export default class XXX extends Vue {
    yyy = 'hi'
}
<script>
  • v-model
:value="value"
@input="value = $event.target.value"

//可缩写为 v-model="x"
  • 声明一个数组，里面都是字符串
tags: string[] = []

11、数据库升级

const version = window.localStorage.getItem(version) || '0'
const recordList = JSON.parse(window.lacalStorage.getItem('recordList')||'[]')
if(version === '0.0.1'){// 数据库升级，数据迁移    
    recordList.forEach(record => {              
        record.createAt = new Date(2020,0,1)    
    })   
    //保存数据 
    window.localStorage.setItem('recordList',JSON.stringify(recordList))
}

window.localStorage.setItem('version','0.0.2')

12、如何在 TS 文件中导入一个 JS

const model = require('@/model.js').model

13、关于this.$route 和 this.$router

  • this.$route 用于获取路由的信息
  • this.$router 是路由器，可以用来进行转发等操作

14、全局状态管理（也叫全局数据管理）的好处是什么？

  • 解耦：将所有数据相关的逻辑放入 store（也就是 MVC 中的 Model，换了个名字而已）
  • 数据读写更方便：任何组件不管在哪里，都可以直接读写数据
  • 控制力更强：组件对数据的读写只能使用 store 提供的 API 进行（当然也不排除有猪队友直接对 tagList 和 recordList 进行 push 等操作，这是没有办法禁止的）

15、Vuex

Vuex 的使用

import Vue from 'vue'import Vuex from 'vuex'

const store = new Vuex.Store({
  state: {                 //data
    count: 0
  },
  mutations: {             //methods
    xxx (state) {
      state.count++
     }
  }
})
  • 注意：mutations 里面的函数只能接受两个参数，第一个是 state，第二个是 payload
  • 通过 store.state 来获取状态对象，以及通过 store.commit 方法触发状态变更：
this.$store..state.count       // 0

store.commit('xxx')
// === this.$store.commit('xxx')

console.log(store.state.count) // -> 1
  • Vuex
    • state：data
    • mutations：methods （同步）
    • actions：调用 methods （异步）

16、深度作用选择器

  • 如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件， 你可以使用 >>> 操作符：
<style scoped>
    .a >>> .b { /* ... */ }
</style>
  • 有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之
  • ::v-deep 是兼容性最强的语法

17、Object.freeze(...) 让其中的内容无法再进行任何更改

18、手机调试方法

  • 跟电脑在同一局域网，访问 http://xxx:8080/
  • Chrome 远程调试 / Safari 远程调试
  • vConsole

19、项目描述

avatar
文章
阅读
粉丝