钱迹记账项目总结

凛 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

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

如果你遇到：

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

你可以：

在

eslintrc.js

中加一行配置：

  "globals": { "RecordItem": true }

保存后彻底关闭编辑器后，重新打开当前项目
如果还有类似的情况（如Tag），也可按照此方法解决

如果你遇到：

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

你可以：

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

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

解耦：将所有数据相关的逻辑放入 store（也就是 MVC 中的 Model，换了个名字而已）
数据读写更方便：任何组件不管在哪里，都可以直接读写数据
控制力更强：组件对数据的读写只能使用 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>

总结

知识点

组件

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

mixin

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

computed

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

watch

装饰器写法：@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 的时候，是把 icon 在 svg 里面作为一个symbol来使用的。然后我们就会发现WebStorm 无法 import 一个 scss。

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

所幸，在搜了一大圈资料后，还是在 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>

上一篇：开源协议下一篇：根据PromiseA+实现一个自己的promise