Vue3 TypeScript 使用教程 - 实战 Vue3 element-plus 开发「待办清单」

本文完整版：《Vue3 TypeScript 使用教程 - 实战 Vue3 element-plus 开发「待办清单」》

Vue3 的源码使用 TypeScript 全部重构，而 TypeScript 是 JS 的一个超集，主要提供对 ES6 的支持以及更棒的代码可读性和高维护性。可以说 Vue3 Typescript 已经成为开发标配。本文带领大家从搭建环境开始，手把手带领大家用 Vue3 Typescript + element-plus 开发一个极简「待办清单」app，在实战中学习 Vue3 TypeScript。

如果你正在搭建后台管理工具，又不想处理前端问题，推荐使用卡拉云 ，卡拉云是新一代低代码开发工具，可一键接入常见数据库及 API ，无需懂前端，仅需拖拽即可快速搭建属于你自己的后台管理工具，一周工作量缩减至一天，详见本文文末。

Vue3 Typescript 环境搭建

这里我们通过 vue-cli 脚手架来初始化项目，如果没有全局安装 vue-cli 也没有关系，可以通过 node 自带的 npx 命令来初始化项目：

vue create kalacloud-vue3-ts
// OR
npx vue create kalacloud-vue3-ts

执行上面的命令，会进入一个交互式的命令行界面：

会有3个选项，分别是 Vue2 的项目模版、Vue3 的项目模版以及手动安装模式。这里我们选择手动安装，因为我们需要添加 Typescript 的支持，然后按回车键会进入到下一步：

这里需要选择我们需要安装的其他支持，按空格键来选中 Typescript，然后再按回车键，进入下一步，会让我们选择 Vue 的版本：

这里选择 3.x，然后按回车键进入下一步，这个界面是询问我们是否使用 vue-class-component 形式来开发代码：

我们输入 n，因为 Vue3 开始，官方推荐开发者使用 Composition API 的形式来组织代码，然后进入下一步：

这个选项的含义是说使用 babel 和 Typescript 做代码编译（包括自动引入polyfill，编译JSX等），这里我们输入 y，然后进入下一步：

这里我们选择 ESLint + Standard config 来作为代码检测工具，然后进入下一步：

选择 Lint on save 即可，在代码保存的时候，自动修正不符合 eslint 规则的代码，然后进入下一步：

这个选项的含义是说把 babel eslint 这些工具单独放在各自的配置文件还是统一写入 package.json 文件中，这里我们选择 In dedicated config files，然后按回车进入下一步:

这里是询问我们是否要保存刚才的选项配置，我们输入 n 即可，然后开始初始化项目代码，并安装对应的依赖包：

出现这样的界面，恭喜你，安装成功！

拓展阅读：《Vue3 Typescript + Axios 全栈开发教程：手把手教你写 APP 实战》

Vue3 TypeScript 目录及重点文件解读

安装成功之后，会有一个初始项目结构：

下面给大家介绍下主要的文件：

|-- public //无需打包的静态资源文件
|-- src //项目源代码目录
    |-- assets //需要打包的静态资源
    |-- components //公共组件
    |-- main.ts //项目入口文件
    |-- shims-vue.d.ts //声明文件
|-- .browserslistrc //兼容目标浏览器范围的配置文件
|-- .eslintrc.js //eslint配置文件
|-- babel.config.js //babel配置文件
|-- tsconfig.json //ts配置文件

tsconfig.json 配置文件需要重点了解下：

{
  "compilerOptions": {
    "target": "esnext", //指定 ECMAScript 的目标版本，这里使用 “esnext” 是因为 vue-cli 内置的 webpack 会帮我们编译代码
    "module": "esnext", //指定使用的模块规范
    "strict": true, //是否开启严格模式
    "jsx": "preserve", //指定 jsx 代码的生成