关于前端:Vue3-TypeScript-使用教程-实战-Vue3-elementplus-开发待办清单

本文完整版：《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 性能优化比照

• 性能优化

  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 低代码开发平台测评