一、安装 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>