首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Vite2+Vue3+Typescript 入门级教程

Vite2 + Vue3 + Typescript 入门级教程

新建项目

创建项目目录

我们来到 的官网,网址如下:

内置了很多中模板:

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

安装 typescript

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

接着我们将 修改为

接着我们将 中的:

改成如下:

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

这是怎么回事呢?

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

这个时候 就不会报错了。

安装

在 目录新建 :

接着在 中新建 :

安装 sass sass-loader

然后在根目录下新建 :

然后在 引入代码:

配置路由

首先我们需要在 下新建 :

在 新建 :

然后在 配置路由:

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

解决的方式如下:

在 下来配置:

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

然后在 :

添加任务

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

在 :

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

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

更新任务

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

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

删除任务

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

然后在 新增删除方法:

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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20210315A007FV00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券