Vite2 + Vue3 + Typescript 入门级教程
新建项目
创建项目目录
我们来到 的官网,网址如下:
内置了很多中模板:
今天我们选择 这个模板来创建项目:
安装 typescript
接着使用以下命令来初始化 配置:
接着我们将 修改为
接着我们将 中的:
改成如下:
这个时候我们发现 会有警告:
这是怎么回事呢?
所以我们需要在项目根目录创建 来定义 模块:
这个时候 就不会报错了。
安装
在 目录新建 :
接着在 中新建 :
安装 sass sass-loader
然后在根目录下新建 :
然后在 引入代码:
配置路由
首先我们需要在 下新建 :
在 新建 :
然后在 配置路由:
在配置路由的这个过程你可能会碰到这个问题:
解决的方式如下:
在 下来配置:
这个时候,报错就解除了。
然后在 :
添加任务
我们需要一个 store 仓库来保存任务列表,每个列表项有一个状态标识。
在 :
页面上我们需要输入框输入内容之后,回车触发向仓库添加数据,在 添加如下代码:
接下来我们需要在 给数据仓库定义 ,用来接收外部提交的执行的方法:
更新任务
当我们点击任务列表项时,需要重新设置列表项的状态值,所以我们需要在 定义一个更新状态的方法,这个方法只需要传递列表项的下标以及状态值:
然后我们需要在 添加更新任务的方法:
删除任务
当我们点击列表项的删除按钮的时候,需要向仓库提交方法删除列表项,所以我们需要在 下添加删除任务的方法,只需要将下标传递过去就行:
然后在 新增删除方法:
到此为止,我们的 todoList 已经圆满结束了,我们来运行下,看看效果吧。
领取专属 10元无门槛券
私享最新 技术干货