记账起手篇
用@vue/cli创建项目
【提醒1：别忘了做项目时，每完成一个小阶段就提交一下代码：git status \ git add. \ git commit -m "xxx"】
【提醒2：template里面不能有两个根组件(两个div)，所以要用一个大div包裹住里面的所有内容】
【提醒3：千万不要在手机上使用fixed定位，坑超级超级多 --- 使用flex定位】
【小技巧：vscode快速查找文件快捷键 ctrl+p 】
前期准备
创建项目
Vue功能的配置
项目的目录说明
目录:
- public: 一般不会变动
- src: 源代码source的简写src
- assets(资源):除了HTML, CSS, JS, TS都放在这里. 比如图片, svg
- components: 只放组件
- router: 用来放路由
- store:
- views: 来放视图的
- App.vue: 整个应用的视图
- Main.ts: 入口文件, 主要功能来渲染App
- registerServiceWorker.ts: 与PWA相关
- shims-tsx.d.ts: TS相关的
- shims-vue.d.ts: TS相关的
- tests: 测试相关
- 下面都是配置文件
- tsconfig.json: TS配置
- vue.config.js: webpack配置
使用编辑器(VScode或Webstorm)的一些快捷功能
编辑器配置：
vscode输入 vbase或者v 就能快速创建一些模板
import alias：
1、TS/JS可以通过 @/目录名 引入文件
改为下图的写法
这里的@就是代表src目录
2、CSS/SASS可以通过 ~@/目录名 引入文件
改为下图的写法
这里的~@就是代表src目录
关于ts文件的细节
默认生成的typescript是没有写分号的，但是ts又希望我们写分号，所以最好都加上分号
TypeScript Importer：自动填写import的工具
- 1、安装TypeScript Importer插件
- 2、鼠标滑到要引入的组件名字(这里就是把鼠标移到Money那里)
- 3、ctrl+shift+p 输入命令Import
- 4、点击add import选项
底部导航思路一：配置router
确定页面url
配置router
初始化组件
控制渲染区域
这里实现了：用户切换不同的路径，就进入不同的页面 (默认是进入Money页面)
创建404页面
别忘了index.ts文件里import NotFound from '@/views/NotFound.vue'
底部导航思路二：全局引入
继续实现功能：点击记账/标签/统计，切换不同页面
但是呢，比如404页面就不需要记账/标签/统计这几个标签，所以要优化：将包裹记账/标签/统计的这个div封装成一个组件Nav
要引入这个组件，怎么引入呢？ 比如在Money引入记账/标签/统计标签：
但是每个页面都这样引入，代码要重复写，所以采用全局引入Nav
全局引入后，单标签的import和components就不用写了
全局引入Nav的思路发展
，因此我们需要svg-sprite-loader 【后续的操作看参考链接】
后续的操作中有是几个偏工程的代码，照着抄就好
在封装Icon时，别忘了全局引入Icon 以及把Nav里的【improt目录这部分代码】挪到 Icon.vue里
开始写CSS
（看Nav.vue和App.vue代码就行）
active-class 路由激活
实现：点击一个图标，图标就高亮
更新meta viewport
以适应手机端，使用淘宝的meta viewport即可
svg的两个坑
第一个坑：如果你下载的svg文件里，开发者自己写了 fill 这个属性，那么很容易影响你对icon变色的操作
解决办法：
步骤1、在vue.config.js里添加框红处的代码
步骤2、运行 yarn add --dev svgo-loader
有个注意点：
第二个坑：webstorm无法import scss文件 （2020年webstorm已经把这个bug修复了）
