一款快速记账的应用
技术栈：Vue、SCSS、TypeScript
预览地址：https://www.geekai.net.cn/Quick-Note-website/
源码地址：https://github.com/ywszm/quick-note-test

前期准备

1. 安装Node.js

2. 安装@vue/cli@4.1.2

使用@Vue/cli创建项目

1. 使用vue创建项目

  1. vue create 项目名

2. 配置

a. 我们使用手动配置
image.png
b. 你项目中需要用到哪些特性？
image.png
c. 是否用class风格的组件语法？
image.png
d. 是否将Bable和TypeScript一起用？
image.png
e. 是否用history模式的路由？
image.png
f. 使用哪个linter？
image.png
g. 提示代码错误
image.png
h. 使用什么测试
image.png
i. 配置放在哪里
image.png
j. 保存配置？
image.png

3. 目录结构说明

image.png

4. 优化

修改vue文件的默认模板，使其每次默认创建为图中的模板。
image.png

5. import alias

TS/JS可以通过@/目录名引入文件，CSS/SASS可以通过~@/目录名引入文件。这样就不用自己计算相对路径了。
image.png

制作导航栏Nav

1. 确定页面url

a. #/money
b. #/labels
c. #statistics

2. 添加代码

a. router/index.ts添加router，配置4个路径对应的组件
image.png
image.png
b. 将router传给new Vue()
image.png
c. 在App组件里用给出router渲染区域
image.png

3. 路由逻辑

将导航栏放在下面，切换页面的时候导航栏不变。使用
image.png
image.png
这样简单的路由逻辑就做好了，但是有个问题，就是有的页面不需要导航栏（比如404页面），这样写就不行了。下面这种方法就可以解决。

4. 添加Nav.vue组件

将router-link放入Nav.vue文件，哪个组件要用到导航栏，就在哪里引入

标签。
image.png
另一种方法：全局引入
在main.ts文件中引入Nav，使其变成一个全局的组件，这样就可以在每个组件的任何地方使用
image.png

遇到的问题1

在网站里面引入全局导航的时候，我在App.vue里面引入

，发现这样做会有问题，因为有的页面不需要，如果把这个放在最外面，就没有办法删掉这个。
于是我在每个组件里面引入，然后加在options.components里面

<script lang="ts">
import Nav form '@/components/Nav.vue';
export default {
  name: 'Labels',
  components: {Nav}
</script>

后来我发现这种做法没有另一种做法好：把

加在全局components里面
这样就可以在每个组件的任何地方使用

5. 选择flex定位

千万不要在手机上使用Fixed定位，会有很多意想不到的错误。
a.