做了这么久的前端，还不会 Vue ，真是有点没面子，心血来潮，做了一款基于 Vue3 + pinia 的 Todo 应用，欢迎围观 http://todo.oneadvise.cn。

这款软件名为 一言清单，目前支持创建、编辑任务，生成日报、周报等功能。

自己的项目技术选型非常的自由，所以也把之前想试试的原子 css 库 tailwindcss 本次尝试了一下。除此以外还用到了状态管理库 pinia , 以及UI库 vant 和 vue-toastification，持久化库 localforage。

经过一段时间的代码编写，我有了以下收获。

一、掌握 vue 的范式

这个熟悉一下就 ok 了。

vue 复制代码

<script setup lang="ts">
 /**
  * 常用的 vue 写法
  */ 
 import { ref, defineProps } from 'vue';
 const a = ref('a');
 a.value = 'xxx';
 // defineProps 可以用来定义组件需要传的属性，和 ts 很像，但写法不是很一致
 
 /**
  * 常用的 pinia 写法
  */
 import { storeToRefs } from 'pinia';
 import useXXStore from './store';
 // 需要监听变化的变量用 storeRefs
 const { xxAttr } = storeToRefs(store);
 // 方法：直接取就行
 const { xxFunc } = store;
</script>

<template>
/**
 * 一些常用的
 * 指令 v-if v-show v-for v-model（v-model 不得不夸，相当好用）
 * 事件 @click 
 * 动态属性 :class :disable :自定义属性
 * script定义的变量可以直接写 a，不用写 a.value
 */
</template>

<style scoped>
/**
 * 这个支持scss，加了 scoped 就是模块级css
 */
</style>

二、了解 tailwind.css 的使用

tailwind.css 这个东西还是蛮有争议的，开发下来，也是觉得有利有弊。

优劣总结

优势：（以空任务组件为例，看着还是很清爽的）

样式和 dom 在一起，在不是很复杂的场景下，少了维护 style 的心智负担（取类名）。
css 体积更小

劣势：

样式和 dom 在一起，在复杂的场景下，感觉 dom 很混乱（这个自行想象，一个 class 里写 20 个左右的 tailwind.css 样式）
调试的时候不好找 dom，相信不了解代码的情况下，最快的方法是搜索类名，然后全局搜索这个类名，对应到组件。

当然劣势也是相对的，也有一些高阶的用法，如果开发组件库的时候，还是蛮不错的，可以用一些缩写去代替一串类名，但是做业务开发，又是另一种心智负担了。

使用心得

首先安装插件 Tailwind CSS IntelliSense, 这样咱们的代码就有提示了

一些 Tip

w- $10px$ 就可以使用 px 为单位了，其他想用 px 的同理，不加使用的是 rem
常用：color 的缩写是 text-{色值} 如 text-white
常用：background 的缩写是 bg-{色值} 如 bg-transparent
常用：一些状态，hover:, disable: 等
比较容易忘： border-radius 的缩写是 rounded-{圆角大小} 如 rounded-[6px]
初学可能会遗漏：display 的属性还是不能缩略的，如 flex

定制主题

一款优秀的应用应该是可以换肤的，以供满足大家各自不同的审美偏向。

这个修改 tailwind.config.js 就可以轻松实现了，以下截图有个问题，会让默认的 text-{色值} 和 bg-{色值} 失效，如果你需要内置的颜色，可以写在 extend 属性里面

三、找到持久化的好帮手 localforage

localforage，基本用法就不多说了，掘金有很多现成的文章介绍。

一个小问题

一开始我按 README.md 推荐的配置用了 websql, 他有个优势，可以直接存入 json 对象，不用转为字符串，其实在浏览器里兼容性还是蛮好的。

不过我还想用 tauri 打包成应用，打包后发现不支持 websql，所以最后还是改成了 indexdb. 这就需要在存入的时候 stringify ，拿出的时候 parse 了

四、掌握借用AI能力

国内现在对接 AI 能力的平台还是蛮多的，我用的是 LinkAI, 感觉还是蛮不错的。

所谓生成日报，周报其实就是将你的工作内容和 prompt 结合起来，交由 GPT 来完成创作。

如下图，根据类型判断加上日报和周报的 prompt，然后将清单中的任务拼接起来放在后面，发送给服务器。整个流程还是比较简单的，但也有几个小技巧。

小技巧1: AI调试

因为 AI 能力基本上都是 token 付费的，如果你的场景很复杂，就不要拿真实的接口反复联调了，有那个钱，咱们省下来喝瓶水不香嘛。我的场景相对简单，就是一个生成中的 toast，然后弹出一个 vant popover 展示内容，所以咱们可以在调试的时候，先自己模拟下数据。

小技巧2：不要暴露你的 token

token 这个东西嘛，还是要防一下的，万一被别人拿去用了，那钱就哗啦啦的流失了。但是有朋友要问了，如果本地调试也想能跑通正常流程，服务端又不愿意加跨域配置怎么办。当然也是有好办法的，vite 可以很轻松的配置代理。首先咱们建一个本地调试的配置，加上 git 忽略（开源项目的话），然后就能爽歪歪的安全跑通流程了。

总结

感谢你看到这里，本着学习 vue3 的目的，开发了这款软件，后续应该会把一周规划和主题选择也加上（有朋友不习惯暗黑主题）。

文章开头有体验链接，大家可以自行体验，无需登录，也不会上传，保留你的行为记录，任务信息（懂行的自己看 network 就放心了），有任何好的 idea 可以评论区留言哦！

祝天天开心，技术力爆表！

入门 Vue3，我做一款 AI Todo 应用