共计 10057 个字符，预计需要花费 26 分钟才能阅读完成。
本文完整版：《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 代码的生成
"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 性能优化比照
-
性能优化
- 源码体积的优化，
Vue3引入tree-shaking的技术，缩小打包体积 - 底层响应式的优化，
Vue3底层依赖Proxy API实现数据响应式，比照Vue2的Object.defineProperty有更强的数据劫持能力，并且能够做到“惰性监听” - 编译时优化，提出
block tree概念，每次diff只会比拟两棵树的动静节点，比照Vue2的组件树全量diff，有显著的性能劣势
- 源码体积的优化，
-
语法 API 优化：Composition API
- 优化代码逻辑组织，能够让代码逻辑更聚焦
- 相似
hook的应用办法，优化组件复用的能力
-
源码优化
- 应用
monorepo更好的代码治理代码 - 应用
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 低代码开发平台测评
