Vite2＋Vue3＋Typescript 入门级教程

Vite2 + Vue3 + Typescript 入门级教程

新建项目

创建项目目录

我们来到 的官网，网址如下：

内置了很多中模板：

今天我们选择 这个模板来创建项目：

安装 typescript

接着使用以下命令来初始化 配置：

接着我们将 修改为

接着我们将 中的：

改成如下：

这个时候我们发现 会有警告：

这是怎么回事呢？

所以我们需要在项目根目录创建 来定义 模块：

这个时候 就不会报错了。

安装

在 目录新建 ：

接着在 中新建 :

安装 sass sass-loader

然后在根目录下新建 ：

然后在 引入代码：

配置路由

首先我们需要在 下新建 ：

在 新建 ：

然后在 配置路由：

在配置路由的这个过程你可能会碰到这个问题：

解决的方式如下：

在 下来配置：

这个时候，报错就解除了。

然后在 ：

添加任务

我们需要一个 store 仓库来保存任务列表，每个列表项有一个状态标识。

在 ：

页面上我们需要输入框输入内容之后，回车触发向仓库添加数据，在 添加如下代码：

接下来我们需要在 给数据仓库定义 ，用来接收外部提交的执行的方法：

更新任务

当我们点击任务列表项时，需要重新设置列表项的状态值，所以我们需要在 定义一个更新状态的方法，这个方法只需要传递列表项的下标以及状态值：

然后我们需要在 添加更新任务的方法：

删除任务

当我们点击列表项的删除按钮的时候，需要向仓库提交方法删除列表项，所以我们需要在 下添加删除任务的方法，只需要将下标传递过去就行：

然后在 新增删除方法：

到此为止，我们的 todoList 已经圆满结束了，我们来运行下，看看效果吧。