本文完整版：《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// ORnpx 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 代码的生成    "importHelpers": true, //是否应用 ts 原生 lib 库中反对的辅助工具    "moduleResolution": "node", //模块解析策略    "skipLibCheck": true, //是否跳过默认库申明文件的类型查看    "esModuleInterop": true, //开启此选项能够修复 esm 和 cjs 在应用 import 的时候导致的兼容性问题    "allowSyntheticDefaultImports": true, //此选项容许开发者从没有设置默认导出的模块中进行默认导入    "sourceMap": true, //是否生成对应的 .map 文件    "baseUrl": ".", //用于解析模块名称的根目录    "types": [ //指定须要蕴含的类型申明的目录      "webpack-env"    ],    "paths": { //指定门路映射规定，相似 webpack 中 alisa 的用法      "@/*": [        "src/*"      ]    },    "lib": [ //指定要蕴含在编译中的库文件      "esnext",      "dom",      "dom.iterable",      "scripthost"    ]  },  "include": [ //指定须要编译的文件类型或目录    "src/**/*.ts",    "src/**/*.tsx",    "src/**/*.vue",    "tests/**/*.ts",    "tests/**/*.tsx"  ],  "exclude": [ //排除不须要编译的文件或目录    "node_modules"  ]}

而后咱们运行 npm run serve，即可启动开发服务器，而后关上浏览器，输出 http://localhost:8081 就能够拜访我的项目首页：

扩大浏览：《Vue form 表单异步验证终极教程 async-validator 表单校验》

Vue3 Typescript 疾速上手

接下来咱们谈谈绝对于 Vue2来说 Vue3有哪些晋升与变动，理解这些变动，让咱们更容易上手 Vue3，我打算从性能差异及 Composition API 应用两个大方面来谈，帮忙大家疾速上手。

Vue3 Typescript 与 Vue2 性能优化比照

  • 性能优化

    1. 源码体积的优化，Vue3 引入 tree-shaking 的技术，缩小打包体积
    2. 底层响应式的优化，Vue3 底层依赖 Proxy API 实现数据响应式，比照 Vue2 的 Object.defineProperty 有更强的数据劫持能力，并且能够做到“惰性监听”
    3. 编译时优化，提出 block tree 概念，每次 diff 只会比拟两棵树的动静节点，比照 Vue2 的组件树全量 diff，有显著的性能劣势

  • 语法 API 优化：Composition API

    1. 优化代码逻辑组织，能够让代码逻辑更聚焦
    2. 相似 hook 的应用办法，优化组件复用的能力

  • 源码优化

    1. 应用 monorepo 更好的代码治理代码
    2. 应用 TypeScript 重构我的项目源码，利于代码的保护

以上几点都是 Vue3 的这次次要改良，接下来开始学习 Composition API 的应用。

扩大浏览：《Element Plus 如何按需引入和主动导入？》

Vue3 setup & ref 应用教程

在 src 目录下新建文件夹 test-api，并创立 Setup.vue 文件：

<template>  <div>    <h2>ref & setup 根本应用办法</h2>    <h2>{{ counter }}</h2>    <button @click="add">+</button>    <button @click="minus">-</button>  </div></template><script lang="ts">import { defineComponent, ref } from 'vue'export default defineComponent({  name: 'Setup',  setup (props, context) {    console.log(props, context)    const counter = ref(0)    const add = () => {      counter.value = counter.value + 1    }    const minus = () => {      counter.value = counter.value - 1    }    return {      counter,      add,      minus    }  }})</script>

而后批改 App.vue 文件如下：

<template>  <SetupVue /></template><script lang="ts">import { defineComponent } from 'vue'import SetupVue from './test-api/Setup.vue'export default defineComponent({  name: 'App',  components: {    SetupVue  }})</script><style>#app {  font-family: Avenir, Helvetica, Arial, sans-serif;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  text-align: center;  color: #2c3e50;  margin-top: 60px;}</style>

能够看到界面会发生变化，并且能够失常应用加减性能：

这是最简略的 setup 和 ref 的应用，setup 就是 Composition API 的入口，能够认为是组件的逻辑入口。ref 用来创立响应式的数据对象，传入的参数为根本类型，返回一个对象，该对象是响应式对象，并且只蕴含一个 value 属性，用于读取这个对象的值。

扩大浏览：《5 款最棒的 Vue UI 挪动端组件库 - 特地针对国内应用场景举荐》

Vue3 reactive 应用教程

reactive 有点相似 ref，只不过 reactive 承受的是援用类型，比方对象，数组等，返回的也是一个响应式数据。 在 test-api 下新建 Reactive.vue 文件:

<template>  <div>    <h2>reactive 根本应用办法</h2>    <h2>{{ info.name }} - {{ info.en }}</h2>    <h3>{{ info.desc }}</h3>    <button @click="updateDesc">update desc</button>  </div></template><script lang="ts">import { defineComponent, reactive } from 'vue'export default defineComponent({  name: 'Setup',  setup () {    const info = reactive({ name: '卡拉云', en: 'kalacloud', desc: '' })    const updateDesc = () => {      info.desc = '「卡拉云 - 极速搭建企业外部工具，十倍晋升开发效率」'    }    return {      info,      updateDesc    }  }})</script>

而后再 App.vue 中导入，能够看到成果：

reactive 和 ref 不同的是，ref 创立进去的数据能够间接在模版中应用，不须要 .value 取值，vue 外部会帮咱们主动解决。

不想解决 Vue 前端问题？

试试卡拉云，拖拽组件连贯 API 和数据库间接生成后盾管理工具，数月的工期升高至1天

扩大浏览：《如何在 Vue 中退出图表 - Vue echarts 应用教程》

Vue3 watch 应用教程

这个 API 和 Vue2 中 watch 性能基本一致，承受三个参数：监听的值、回调、其余配置项，咱们来应用一下，这里基于 Setup.vue 稍作批改即可：

<template>  <div>    <h2>watch 根本应用办法</h2>    <h2>{{ counter }}</h2>    <button @click="add">+</button>    <button @click="minus">-</button>  </div></template><script lang="ts">import { defineComponent, ref, watch } from 'vue'export default defineComponent({  name: 'Setup',  setup (props, context) {    console.log(props, context)    const counter = ref(0)    const add = () => {      counter.value = counter.value + 1    }    const minus = () => {      counter.value = counter.value - 1    }    watch(counter, (newValue, oldValue) => {      console.log('counter 产生了变动，最新的值是：', newValue)    })    return {      counter,      add,      minus    }  }})</script>

能够看到，每次 counter 产生扭转，都能够输入到控制台最新的后果：

watch 第三个参数承受一个可选对象：

{   immediate: true, // 初始化的时候就会执行一次回调函数  deep: false, // 深度监听对象的变动  flush: 'pre' | 'post' | 'sync' // pre=回调函数在渲染前调用；post=回调函数在渲染后调用；sync=回调将被同步调用，慎用！可能会阻塞页面渲染}

扩大浏览：《最好用的 6 款 Vue 拖拽组件库举荐》

Vue3 computed 应用教程

computed 是计算属性，其值依赖响应式数据，如果响应式数据产生扭转，vue 会帮咱们主动计算扭转后的值，像这样应用，在 test-api 新建 Computed.vue 文件：

<template>  <div>    <h2>computed 根本应用办法</h2>    <h3>「卡拉云 - 极速搭建企业外部工具，十倍晋升开发效率」</h3>    <h2>{{ info }}</h2>    <button @click="update">update</button>  </div></template><script lang="ts">import { computed, defineComponent, reactive, ref } from 'vue'export default defineComponent({  name: 'Setup',  setup () {    const prefix = ref('')    const msg = reactive({ name: '卡拉云' })    const info = computed(() => prefix.value + msg.name)    const update = () => {      prefix.value = 'kalacloud - '    }    return {      info,      update    }  }})</script>

咱们会发现，prefix 产生了扭转，info 也会随之扭转，这就是 computed 的用法

如果被依赖的响应式数据没有产生扭转，那么也不会从新计算，所以 computed 还有缓存的个性，个别用于缓存计算量比拟大的数据。

以上是 Vue3 Composition API 的一些应用办法，接下来，我会率领大家理论开发一个简略的利用，坚固学习的这些 API。

扩大浏览：《ToolJet 是什么，怎么样？ —— 低代码开发平台测评》

应用 Vue3 TypeScript + element-plus 开发「待办清单」实例

先为咱们的利用装置UI框架，这样视觉上会难看些，在命令行执行上面的命令：

npm install element-plus --save

装置好之后，在 main.ts 中z户厕组件并导入款式文件：

import { createApp } from 'vue'import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'import App from './App.vue'const app = createApp(App)app.use(ElementPlus)app.mount('#app')

先创立一个 types 文件夹，用来寄存我的项目中类型申明文件，比方咱们这个 todo 利用，能够创立一个 todo.ts:

export interface Todo {  id: number;  title: string;  done: boolean;}

而后在 components 文件夹下新建 TodoList.vue，这个组件用来实现解决每个待办事项的操作逻辑

<template>  <div class="todo-item">    <el-checkbox v-model="todo!.done" />    <el-alert class="alert" :title="todo!.title" :type="todo!.done ? 'success' : 'warning'" :closable="false" />    <el-button type="danger" @click="remove">删除</el-button>  </div></template><script lang="ts">import { defineComponent, PropType } from 'vue'import { Todo } from '../types/todo'export default defineComponent({  props: {    todo: {      type: Object as PropType<Todo>    }  },  emits: ['toggle', 'remove'],  setup (props, context) {    const toggle = () => {      context.emit('toggle', props.todo!.id)    }    const remove = () => {      context.emit('remove', props.todo!.id)    }    return {      toggle,      remove    }  }})</script><style scoped>.todo-item {  display: flex;  align-items: center;  margin-bottom: 20px;}.alert {  margin: 0 20px;}</style>

咱们把 toggle，remove 这两个操作通过 emit 派发给父组件，在父组件去实现具体的业务逻辑，不过先不焦急，咱们先实现增加待办事项的组件，同样在 components 中创立 AddTodo.vue:

<template>  <div class="add-todo">    <el-input type="text" v-model="state.inputValue" />    <el-button @click="onClick" class="add-button" type="primary">增加</el-button>  </div></template><script lang="ts">import { defineComponent, reactive, watchEffect } from 'vue'interface State {  inputValue: string;}export default defineComponent({  emits: ['add'],  setup (_, context) {    const state = reactive<State>({      inputValue: ''    })    const onClick = () => {      context.emit('add', state.inputValue)      state.inputValue = ''    }    return {      state,      onClick    }  }})</script><style scoped>.add-todo {  display: flex;}.add-button {  margin-left: 20px;}</style>

同样的，应用 context.emit('add', state.inputValue) 来派发事件给父组件，而后咱们先实现 add，remove，toggle 这三个办法，并封装成一个工具函数，在 src 目录中创立 utils 文件夹，而后创立 todoAction.ts，用来承载具体的业务逻辑：

import { Ref } from 'vue'import { Todo } from '@/types/todo'export default (todos: Ref<Todo[]>) => {  const addTodo = (title: string) => {    todos.value = [...todos.value, {      id: todos.value.length + 1,      title,      done: false    }]  }  const removeTodo = (id: number) => {    todos.value = todos.value.filter(todo => todo.id !== id)  }  const toggleTodo = (id: number) => {    const todo = todos.value.find(todo => todo.id === id)    if (!todo) return    todo.done = !todo.done  }  return {    addTodo,    removeTodo,    toggleTodo  }}

addTodo 用来实现增加一个待办事项，removeTodo 用来实现移除一个待办事项，toggleTodo 用来更新待办事项的状态。最初咱们来实现父组件，创立 Todo.vue 文件：

<template>  <todo-list    v-for="todo in todos"    :todo="todo"    :key="todo.id"    @toggle="toggleTodo"    @remove="removeTodo"  />  <add-todo    @add="addTodo"  /></template><script lang="ts">import { defineComponent, watchEffect, ref } from 'vue'import TodoList from './TodoList.vue'import AddTodo from './AddTodo.vue'import todoAction from '../utils/todoAction'import { Todo } from '../types/todo'const initialTodos: Todo[] = [  {    id: 1,    title: '应用卡拉云创立表单',    done: false  },  {    id: 2,    title: '应用卡拉云创立图表',    done: false  },  {    id: 3,    title: '应用卡拉云创立利用',    done: false  }]export default defineComponent({  components: {    TodoList,    AddTodo  },  setup () {    const todos = ref<Todo[]>(initialTodos)    const { addTodo, removeTodo, toggleTodo } = todoAction(todos)    return {      todos,      addTodo,      removeTodo,      toggleTodo    }  }})</script>

组件的代码实现根本实现了，在 App.vue 中进行应用，最初的成果如下：

这个利用尽管简略，然而五脏俱全，通过这篇文章，大家能够学习到如何基于 Vue3 的组合API并联合 Typescript 进行开发。本文中的所有代码均能够在 kalacloud-vue3-ts 中找到。

扩大浏览：《appsmith 是什么？怎么样，评估如何》

Vue3 Typescript 上手教程总结

本文具体解说新版 Vue3 Typescript 与旧版 Vue 有什么区别及代码上的不同。其实如果你基本不想解决简单的前端问题，齐全能够应用卡拉云来搭建前端工具，卡拉云内置多种罕用组件，无需懂任何前端，仅需拖拽即可疾速生成，一键连贯后端数据源，极速开发后盾管理工具。

卡拉云可帮你疾速搭建企业外部工具，下图为应用卡拉云搭建的外部广告投放监测零碎，无需懂前端，仅需拖拽组件，10 分钟搞定。你也能够疾速搭建一套属于你的后盾管理工具，理解更多。

卡拉云是新一代低代码开发平台，与前端框架 Vue、React等相比，卡拉云的劣势在于不必首先搭建开发环境，间接注册即可开始应用。开发者齐全不必解决任何前端问题，只需简略拖拽，即可疾速生成所需组件，可一键接入常见数据库及 API，依据疏导简略几步买通前后端，数周的开发工夫，缩短至 1 小时。立刻收费试用卡拉云。

扩大浏览：

  • Vue form 表单异步验证终极教程
  • 最好用的 6 款 MongoDB GUI 管理工具横向测评
  • 5 款最棒的 Vue UI 挪动端组件库 - 特地针对国内应用场景举荐
  • 顶级好用的 5 款 Vue table 表格组件测评与举荐
  • 12 款最棒 Vue 开源 UI 库测评 - 特地针对国内应用场景举荐
  • Retool 是什么，怎么样？ —— Retool 低代码开发平台测评