钱迹记账项目总结

2022年02月25日 88次浏览

一、安装 Node.js 10

二、安装 @vue/cli@4.1.2

如果你已经安装了其他版本的 @vue/cli ,请先卸载,卸载命令是

vue --version # 如果这个命令打印出一个版本号,而版本号又不是 4.1.2 就说明你需要卸载
yarn global remove @vue/cli

然后就可以安装了,命令如下:

yarn global add @vue/cli@4.1.2
vue --version  # 版本号应该是 4.1.2

如果你是老手,想要使用更高版本的 @vue/cli,可以创建项目后,参考官方的升级教程(新手不用看)

为什么一定要求大家用这个版本呢?因为就在我录完课程之后,@vue/cli 升级到了 4.2.0,这个版本对 eslint 做了升级,导致我的课程的代码在 4.2.0 版本里会报一个 eslint 错误,解决这个错误需要手动修改 eslint 配置,有点影响开发体验。

创建项目

步骤

  • vue create more-money
  • cd money
  • yarn serve

底部导航

使用Vue Router

TypeScript的优点

  • 类型提示:自动提示更智能
  • 编译时报错:还没运行代码就知道哪里出错了
  • 类型检查:无法点出错误的属性

TypeScript的本质

JS:类型

检查JS代码 有错就会编译报错,没有错误就在编译时会把类型删除,得到只含有JS的部分,传给babel变成更低级的JS

编译报错也会执行(妥协,有时候我们需要把一大片的js翻译成ts,也可以修改在package.json中添加noEmitOnError为true这样出错了就不会编译成JS了)

JS 改写成 TS

  1. 首先将后缀改成 .ts
  2. 将报错、没有类型之类的错误添加上类型
  3. 如果类型的在其他的文件中怎么办,将共用的类型提取出来放在一个 .d.ts文件中如 custom.d.ts

如果你遇到:

  • 已经在 custom.d.ts 中定义了 RecordItem, 但RecordItem仍然标红,显示未定义

你可以:

  • eslintrc.js
    

    中加一行配置:

      "globals": { "RecordItem": true }
    
  • 保存后彻底关闭编辑器后,重新打开当前项目

  • 如果还有类似的情况(如Tag),也可按照此方法解决


如果你遇到:

  • 当前命令行编译报错,无法进行 git commit

你可以:

  1. git commit --no-verify -m "commit信息" 跳过本次pre-commit验证
  2. 找到当前项目目录所在的 .git 文件夹,删除hooks文件夹,彻底删除这个限制

全局状态管理(也叫全局数据管理)的好处是什么?

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

Vue深入到里面组件的语法:::v-deep

<template>
  <Layout>
    <Types class="x"/>
  </Layout>
</template>

<script lang="ts">

import Types from '@/components/Money/Types.vue';

export default {
  name: 'statistics',
  components: {Types},
};
</script>

<style lang="scss" scoped>
.x ::v-deep li {
  border: 1px solid red;
}
</style>

总结

知识点

组件

  1. 构造选项 (data)
  2. 类组件 + 装饰器 (JS or TS)

mixin

  1. 背景:在创建标签的时候有两个地方使用到标签,节约多次重复的代码书写,只写一次重复使用
  2. TS写法

computed

  1. computed获取Vuex数据,获取计算出来的列表
  2. 自动根据依赖来缓存,如果没有更新就不会重新计算
  3. TS语法,在TS中需要使用 getter setter语法写

watch

  1. 装饰器写法:@Watch

prop、sync、v-model 还有诸如 slot 插槽(Layout组件中使用)和具名插槽、SVG symbols。eslint、 localStorage、

表驱动编程(:class = "{key:value,key:value}",当key为true 的时候value就是class)、模块化思想、重构技巧、命名严谨性、Vue Router(SPA hash不刷新页面/history)、Vuex

项目描述

钱迹记账是一款极简的记账应用,也是一款基于Vue、VueRouter、Vuex、TypeScript的单页面应用。

由本人独立实现,期间遇到了很多webpack和TypeScript方面的问题,解决过程记录在本人的博客,源代码几乎完全用TypeScript实现,用了装饰器语法。

源码地址

预览地址

遇到过了一些技术问题

Vue 中使用 svg

因为我使用了 TypeScript 所以首先,要让 TypeScript 认识 .svg 文件

Vue 自带的 shims-vue.d.ts 中加入 .svg

declare module  "*.svg"{
  const content: string;
  export default content;

}

接着,引入 svg 需要使用到 svg-sprite-loader
但是在这里 WebStrom 有一个不兼容的问题

我们在使用 svg-sprite-loader 来引入所用的 icon 并把 icon 都变成 svg 的时候,是把 iconsvg 里面作为一个symbol来使用的。然后我们就会发现WebStorm 无法 import 一个 scss

随后针对这个问题我得出的结论是官方给的 loader 可能有 bug, 解决不了 webpack 的配置问题,使得 Webstromloader 产生冲突。

所幸,在搜了一大圈资料后,还是在 Github issue上找到了有人出现了相似得问题,然后找到了大佬们贡献得代码。即不在引用 svg-sprite-loader,转变成引用一个新的库 svg-sprite-loader-mod,在命令行输入以下命令即可安装。

yarn add svg-sprite-loader -D

然后把 webpack.config.js 的内容翻译成 vue.configs.js的内容

const path = require('path')

module.exports = {
    chainWebpack: config => {
        const dir = path.resolve(__dirname, 'src/assets/icons')
        config.module
            .rule('svg-sprite')
            .test(/\.svg$/)
            .include.add(dir).end() //只包含 icons 目录
            .use('svg-sprite-loader-mod').loader('svg-sprite-loader-mod')
                .options({extract: false}).end()
        config.plugin('svg-sprite').use(require('svg-sprite-loader-mod/plugin'), 
            [{plainSprite: true}])
        config.module.rule('svg').exclude.add(dir) //其他 svg loader 排除 icons 目录
    }
}

引用后就可以使用 use 标签了
例如

<template>
  <svg class="icon" @click="$emit('click',$event)">
    <use :xlink:href="'#'+name"/>
  </svg>
</template>