甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

QQ :532337155
电话：028-86922220
 
成都网站建设设计

将想法与焦点和您一起共享

Vue3+TypeScript完整项目上手教程

一个完整的Vue3+Ts项目,支持.vue和.tsx写法

项目地址：https://github.com/vincentzyc/vue3-demo.git

盈江网站建设公司创新互联,盈江网站设计制作，有大型网站制作公司丰富经验。已为盈江上千家提供企业网站建设服务。企业网站搭建\外贸网站制作要多少钱，请找那个售后服务好的盈江做网站的公司定做！

TypeScript 是JS的一个超集，主要提供了类型系统和对ES6的支持，使用 TypeScript 可以增加代码的可读性和可维护性，在 react 和 vue 社区中也越来越多人开始使用TypeScript。从最近发布的 Vue3 正式版本来看， Vue3 的源码就是用 TypeScript 编写的，更好的 TypeScript 支持也是这一次升级的亮点。当然，在实际开发中如何正确拥抱 TypeScript 也是迁移至 Vue3 的一个小痛点，这里就针对 Vue3 和 TypeScript 展开一些交流。

96.8%的代码都是TypeScript，支持的力度也是相当大

  • Vue3入口: https://github.com/vuejs/vue-next

项目搭建

在官方仓库的 Quickstart 中推荐用两种方式方式来构建我们的 SPA 项目：

  • vite
 
 
 
 
    
  
  
  
  
  1. npm init vite-app sail-vue3 # OR yarn create vite-app sail-vue3
    2.
  • vue-cli
 
 
 
 
    
  
  
  
  
  1. npm install -g @vue/cli # OR yarn global add @vue/clivue create sail-vue3# select vue 3 preset
    2.

vite 是一个由原生ESM驱动的Web开发构建工具，打开 vite 依赖的 package.json 可以发现在 devDependencies 开发依赖里面已经引入了TypeScript ，甚至还有 vuex , vue-router , less , sass 这些本地开发经常需要用到的工具。vite 轻量，开箱即用的特点，满足了大部分开发场景的需求，作为快速启动本地 Vue 项目来说，这是一个非常完美的工具。

后面的演示代码也是用vite搭的

从 vue2.x 走过来的掘友肯定知道 vue-cli 这个官方脚手架， vue3 的更新怎么能少得了 vue-cli 呢， vue-cli 更强调的是用 cli 的方式进行交互式的配置，选择起来更加灵活可控。丰富的官方插件适配，GUI的创建管理界面，标准化开发流程，这些都是 vue-cli 的特点。

  • vue-cli TypeScript STEP1 

  • vue-cli TypeScript STEP2

想要预装TypeScript，就需要选择手动配置，并check好TypeScript

忘记使用选择 TypeScript 也没事，加一行cli命令就行了

 
 
 
 
    
  
  
  
  
  1. vue add typescript
    2.

最后，别忘了在 .vue 代码中，给 script 标签加上 lang="ts"

 
 
 
 
    
  
  
  
  
  1.  
    2.

Option API风格

在 Vue2.x 使用过 TypeScript 的掘友肯定知道引入 TypeScript 不是一件简单的事情：

  1. 要用 vue-class-component 强化 vue 组件，让 Script 支持 TypeScript 装饰器
  2. 用 vue-property-decorator 来增加更多结合 Vue 特性的装饰器
  3. 引入 ts-loader 让 webpack 识别 .ts .tsx 文件
  4. .....

然后出来的代码风格是这样的：

 
 
 
 
    
  
  
  
  
  1. @Component({
    2. 
  
  
  
  
  2.     components:{ componentA, componentB},
    3. 
  
  
  
  
  3. })
    4. 
  
  
  
  
  4. export default class Parent extends Vue{
    5. 
  
  
  
  
  5.   @Prop(Number) readonly propA!: number | undefined
    6. 
  
  
  
  
  6.   @Prop({ default: 'default value' }) readonly propB!: string
    7. 
  
  
  
  
  7.   @Prop([String, Boolean]) readonly propC!: string | boolean | undefined
    8. 
  
  
  
  
  8. 
  
  
  
  
  9.   // data信息
    10. 
  
  
  
  
  10.   message = 'Vue2 code style'
    11. 
  
  
  
  
  11. 
  
  
  
  
  12.   // 计算属性
    13. 
  
  
  
  
  13.   private get reversedMessage (): string[] {
    14. 
  
  
  
  
  14.       return this.message.split(' ').reverse().join('')
    15. 
  
  
  
  
  15.   }
    16. 
  
  
  
  
  16. 
  
  
  
  
  17.   // method
    18. 
  
  
  
  
  18.   public changeMessage (): void {
    19. 
  
  
  
  
  19.     this.message = 'Good bye'
    20. 
  
  
  
  
  20.   }
    21. 
  
  
  
  
  21. }
    22.

class 风格的组件，各种装饰器穿插在代码中，有点感觉自己不是在写 vue ，些许凌乱，所以这种曲线救国的方案在 vue3 里面肯定是行不通的。

在 vue3 中可以直接这么写：

 
 
 
 
    
  
  
  
  
  1. import { defineComponent, PropType } from 'vue'
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. interface Student {
    4. 
  
  
  
  
  4.   name: string
    5. 
  
  
  
  
  5.   class: string
    6. 
  
  
  
  
  6.   age: number
    7. 
  
  
  
  
  7. }
    8. 
  
  
  
  
  8. 
  
  
  
  
  9. const Component = defineComponent({
    10. 
  
  
  
  
  10.   props: {
    11. 
  
  
  
  
  11.     success: { type: String },
    12. 
  
  
  
  
  12.     callback: {
    13. 
  
  
  
  
  13.       type: Function as PropType<() => void>
    14. 
  
  
  
  
  14.     },
    15. 
  
  
  
  
  15.     student: {
    16. 
  
  
  
  
  16.       type: Object as PropType,
    17. 
  
  
  
  
  17.       required: true
    18. 
  
  
  
  
  18.     }
    19. 
  
  
  
  
  19.   },
    20. 
  
  
  
  
  20.   data() {
    21. 
  
  
  
  
  21.      return {
    22. 
  
  
  
  
  22.         message: 'Vue3 code style'
    23. 
  
  
  
  
  23.     }
    24. 
  
  
  
  
  24.   },
    25. 
  
  
  
  
  25.   computed: {
    26. 
  
  
  
  
  26.     reversedMessage(): string {
    27. 
  
  
  
  
  27.       return this.message.split(' ').reverse().join('')
    28. 
  
  
  
  
  28.     }
    29. 
  
  
  
  
  29.   }
    30. 
  
  
  
  
  30. })
    31.

vue 对 props 进行复杂类型验证的时候，就直接用 PropType 进行强制转换， data 中返回的数据也能在不显式定义类型的时候推断出大多类型， computed 也只用返回类型的计算属性即可，代码清晰，逻辑简单，同时也保证了 vue 结构的完整性。

Composition API风格

在 vue3 的 Composition API 代码风格中，比较有代表性的api就是 ref 和 reactive ，我们看看这两个是如何做类型声明的：

ref

 
 
 
 
    
  
  
  
  
  1. import { defineComponent, ref } from 'vue'
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. const Component = defineComponent({
    4. 
  
  
  
  
  4. setup() {
    5. 
  
  
  
  
  5.   const year = ref(2020)
    6. 
  
  
  
  
  6.   const month = ref('9')
    7. 
  
  
  
  
  7. 
  
  
  
  
  8.   month.value = 9 // OK
    9. 
  
  
  
  
  9.   const result = year.value.split('') // => Property 'split' does not exist on type 'number'
    10. 
  
  
  
  
  10.  }
    11. 
  
  
  
  
  11. })
    12.

分析上面的代码，可以发现如果我们不给定 ref 定义的类型的话， vue3 也能根据初始值来进行类型推导，然后需要指定复杂类型的时候简单传递一个泛型即可。

Tips：如果只有setup方法的话，可以直接在defineComponent中传入setup函数

 
 
 
 
    
  
  
  
  
  1. const Component = defineComponent(() => {
    2. 
  
  
  
  
  2.     const year = ref(2020)
    3. 
  
  
  
  
  3.     const month = ref('9')
    4. 
  
  
  
  
  4. 
  
  
  
  
  5.     month.value = 9 // OK
    6. 
  
  
  
  
  6.     const result = year.value.split('') // => Property 'split' does not exist on type 'number'
    7. 
  
  
  
  
  7. })
    8.

reactive

 
 
 
 
    
  
  
  
  
  1. import { defineComponent, reactive } from 'vue'
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. interface Student {
    4. 
  
  
  
  
  4.   name: string
    5. 
  
  
  
  
  5.   class?: string
    6. 
  
  
  
  
  6.   age: number
    7. 
  
  
  
  
  7. }
    8. 
  
  
  
  
  8. 
  
  
  
  
  9. export default defineComponent({
    10. 
  
  
  
  
  10.   name: 'HelloWorld',
    11. 
  
  
  
  
  11.   setup() {
    12. 
  
  
  
  
  12.     const student = reactive({ name: '阿勇', age: 16 })
    13. 
  
  
  
  
  13.     // or
    14. 
  
  
  
  
  14.     const student: Student = reactive({ name: '阿勇', age: 16 })
    15. 
  
  
  
  
  15.     // or
    16. 
  
  
  
  
  16.     const student = reactive({ name: '阿勇', age: 16, class: 'cs' }) as Student
    17. 
  
  
  
  
  17.   }
    18. 
  
  
  
  
  18. })
    19.

声明 reactive 的时候就很推荐使用接口了，然后怎么使用类型断言就有很多种选择了，这是 TypeScript 的语法糖，本质上都是一样的。

自定义Hooks

vue3 借鉴 react hooks 开发出了 Composition API ，那么也就意味着 Composition API 也能进行自定义封装 hooks ，接下来我们就用 TypeScript 风格封装一个计数器逻辑的 hooks ( useCount ):

首先来看看这个 hooks 怎么使用：

 
 
 
 
    
  
  
  
  
  1. import { ref } from '/@modules/vue'
    2. 
  
  
  
  
  2. import  useCount from './useCount'
    3. 
  
  
  
  
  3. 
  
  
  
  
  4. export default {
    5. 
  
  
  
  
  5.   name: 'CountDemo',
    6. 
  
  
  
  
  6.   props: {
    7. 
  
  
  
  
  7.     msg: String
    8. 
  
  
  
  
  8.   },
    9. 
  
  
  
  
  9.   setup() {
    10. 
  
  
  
  
  10.     const { current: count, inc, dec, set, reset } = useCount(2, {
    11. 
  
  
  
  
  11.       min: 1,
    12. 
  
  
  
  
  12.       max: 15
    13. 
  
  
  
  
  13.     })
    14. 
  
  
  
  
  14.     const msg = ref('Demo useCount')
    15. 
  
  
  
  
  15. 
  
  
  
  
  16.     return {
    17. 
  
  
  
  
  17.       count,
    18. 
  
  
  
  
  18.       inc,
    19. 
  
  
  
  
  19.       dec,
    20. 
  
  
  
  
  20.       set,
    21. 
  
  
  
  
  21.       reset,
    22. 
  
  
  
  
  22.       msg
    23. 
  
  
  
  
  23.     }
    24. 
  
  
  
  
  24.   }
    25. 
  
  
  
  
  25. }
    26.

贴上 useCount 的源码：

 
 
 
 
    
  
  
  
  
  1. import { ref, Ref, watch } from 'vue'
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. interface Range {
    4. 
  
  
  
  
  4.   min?: number,
    5. 
  
  
  
  
  5.   max?: number
    6. 
  
  
  
  
  6. }
    7. 
  
  
  
  
  7. 
  
  
  
  
  8. interface Result {
    9. 
  
  
  
  
  9.   current: Ref,
    10. 
  
  
  
  
  10.   inc: (delta?: number) => void,
    11. 
  
  
  
  
  11.   dec: (delta?: number) => void,
    12. 
  
  
  
  
  12.   set: (value: number) => void,
    13. 
  
  
  
  
  13.   reset: () => void
    14. 
  
  
  
  
  14. }
    15. 
  
  
  
  
  15. 
  
  
  
  
  16. export default function useCount(initialVal: number, range?: Range): Result {
    17. 
  
  
  
  
  17.   const current = ref(initialVal)
    18. 
  
  
  
  
  18.   const inc = (delta?: number): void => {
    19. 
  
  
  
  
  19.     if (typeof delta === 'number') {
    20. 
  
  
  
  
  20.       current.value += delta
    21. 
  
  
  
  
  21.     } else {
    22. 
  
  
  
  
  22.       current.value += 1
    23. 
  
  
  
  
  23.     }
    24. 
  
  
  
  
  24.   }
    25. 
  
  
  
  
  25.   const dec = (delta?: number): void => {
    26. 
  
  
  
  
  26.     if (typeof delta === 'number') {
    27. 
  
  
  
  
  27.       current.value -= delta
    28. 
  
  
  
  
  28.     } else {
    29. 
  
  
  
  
  29.       current.value -= 1
    30. 
  
  
  
  
  30.     }
    31. 
  
  
  
  
  31.   }
    32. 
  
  
  
  
  32.   const set = (value: number): void => {
    33. 
  
  
  
  
  33.     current.value = value
    34. 
  
  
  
  
  34.   }
    35. 
  
  
  
  
  35.   const reset = () => {
    36. 
  
  
  
  
  36.     current.value = initialVal
    37. 
  
  
  
  
  37.   }
    38. 
  
  
  
  
  38. 
  
  
  
  
  39.   watch(current, (newVal: number, oldVal: number) => {
    40. 
  
  
  
  
  40.     if (newVal === oldVal) return
    41. 
  
  
  
  
  41.     if (range && range.min && newVal < range.min) {
    42. 
  
  
  
  
  42.       current.value = range.min
    43. 
  
  
  
  
  43.     } else if (range && range.max && newVal > range.max) {
    44. 
  
  
  
  
  44.       current.value = range.max
    45. 
  
  
  
  
  45.     }
    46. 
  
  
  
  
  46.   })
    47. 
  
  
  
  
  47. 
  
  
  
  
  48.   return {
    49. 
  
  
  
  
  49.     current,
    50. 
  
  
  
  
  50.     inc,
    51. 
  
  
  
  
  51.     dec,
    52. 
  
  
  
  
  52.     set,
    53. 
  
  
  
  
  53.     reset
    54. 
  
  
  
  
  54.   }
    55. 
  
  
  
  
  55. }
    56.

分析源码

这里首先是对 hooks 函数的入参类型和返回类型进行了定义，入参的 Range 和返回的 Result 分别用一个接口来指定，这样做了以后，最大的好处就是在使用 useCount 函数的时候，ide就会自动提示哪些参数是必填项，各个参数的类型是什么，防止业务逻辑出错。

接下来，在增加 inc 和减少 dec 的两个函数中增加了 typeo 类型守卫检查，因为传入的 delta 类型值在某些特定场景下不是很确定，比如在 template 中调用方法的话，类型检查可能会失效，传入的类型就是一个原生的 Event 。

关于 ref 类型值，这里并没有特别声明类型，因为 vue3 会进行自动类型推导，但如果是复杂类型的话可以采用类型断言的方式：ref(initObj) as Ref

小建议

AnyScript

在初期使用 TypeScript 的时候，很多掘友都很喜欢使用 any 类型，硬生生把TypeScript 写成了 AnyScript ，虽然使用起来很方便，但是这就失去了 TypeScript 的类型检查意义了，当然写类型的习惯是需要慢慢去养成的，不用急于一时。

Vetur

vetur 代码检查工具在写vue代码的时候会非常有用，就像构建 vue 项目少不了 vue-cli 一样，vetur 提供了 vscode 的插件支持，赶着升级 vue3 这一波工作，顺带也把 vetur 也带上吧。

一个完整的Vue3+ts项目

├─public
│      favicon.ico
│      index.html
└─src
    │  App.vue
    │  main.ts
    │  shims-vue.d.ts
    ├─assets
    │  │  logo.png
    │  └─css
    │          base.css
    │          main.styl
    ├─components
    │  │  HelloWorld.vue
    │  └─base
    │          Button.vue
    │          index.ts
    │          Select.vue
    ├─directive
    │      focus.ts
    │      index.ts
    │      pin.ts
    ├─router
    │      index.ts
    ├─store
    │      index.ts
    ├─utils
    │  │  cookie.ts
    │  │  deep-clone.ts
    │  │  index.ts
    │  │  storage.ts
    │  └─validate
    │          date.ts
    │          email.ts
    │          mobile.ts
    │          number.ts
    │          system.ts
    └─views
        │  About.vue
        │  Home.vue
        │  LuckDraw.vue
        │  TodoList.vue
        └─address
                AddressEdit.tsx
                AddressList.tsx
  •  vue写法
 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2. 
  
  
  
  
    4. 
  
  
  
  
  4. import dayjs from "dayjs";
    5. 
  
  
  
  
  5. import { ref, reactive, onMounted } from "vue";
    6. 
  
  
  
  
  6. import { Button, Step, Steps, NoticeBar } from "vant";
    7. 
  
  
  
  
  7. 
  
  
  
  
  8. export default {
    9. 
  
  
  
  
  9.   components: {
    10. 
  
  
  
  
  10.     Button,
    11. 
  
  
  
  
  11.     Step,
    12. 
  
  
  
  
  12.     Steps,
    13. 
  
  
  
  
  13.     NoticeBar,
    14. 
  
  
  
  
  14.   },
    15. 
  
  
  
  
  15.   setup() {
    16. 
  
  
  
  
  16.     const nameinput = ref();
    17. 
  
  
  
  
  17.     const selectionStart = ref(0);
    18. 
  
  
  
  
  18.     const twoNow = dayjs().subtract(2, "day").format("YYYY-MM-DD HH:mm:ss");
    19. 
  
  
  
  
  19.     const now = dayjs().format("YYYY-MM-DD HH:mm:ss");
    20. 
  
  
  
  
  20.     const now2 = dayjs().add(2, "day").format("YYYY-MM-DD HH:mm:ss");
    21. 
  
  
  
  
  21.     const formData = reactive({
    22. 
  
  
  
  
  22.       name: "",
    23. 
  
  
  
  
  23.       phone: "",
    24. 
  
  
  
  
  24.       code: "",
    25. 
  
  
  
  
  25.     });
    26. 
  
  
  
  
  26. 
  
  
  
  
  27.     onMounted(() => {
    28. 
  
  
  
  
  28.       (nameinput.value as HTMLInputElement).focus();
    29. 
  
  
  
  
  29.     });
    30. 
  
  
  
  
  30. 
  
  
  
  
  31.     const insertName = () => {
    32. 
  
  
  
  
  32.       const index = (nameinput.value as HTMLInputElement).selectionStart;
    33. 
  
  
  
  
  33.       if (typeof index !== "number") return;
    34. 
  
  
  
  
  34.       formData.name =
    35. 
  
  
  
  
  35.         formData.name.slice(0, index) + "哈哈" + formData.name.slice(index);
    36. 
  
  
  
  
  36.     };
    37. 
  
  
  
  
  37. 
  
  
  
  
  38.     return {
    39. 
  
  
  
  
  39.       nameinput,
    40. 
  
  
  
  
  40.       formData,
    41. 
  
  
  
  
  41.       insertName,
    42. 
  
  
  
  
  42.       selectionStart,
    43. 
  
  
  
  
  43.       twoNow,
    44. 
  
  
  
  
  44.       now,
    45. 
  
  
  
  
  45.       now2,
    46. 
  
  
  
  
  46.     };
    47. 
  
  
  
  
  47.   },
    48. 
  
  
  
  
  48. };
    49. 
  
  
  
  
  49.  
    50. 
 
 
 
 
 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2. 
  
  
  
  
    4. 
  
  
  
  
  4. import dayjs from "dayjs";
    5. 
  
  
  
  
  5. import { defineComponent } from "vue";
    6. 
  
  
  
  
  6. import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src
    7. 
  
  
  
  
  7. import { Button, Dialog, Toast } from "vant";
    8. 
  
  
  
  
  8. 
  
  
  
  
  9. export default defineComponent({
    10. 
  
  
  
  
  10.   name: "Home",
    11. 
  
  
  
  
  11.   components: {
    12. 
  
  
  
  
  12.     HelloWorld,
    13. 
  
  
  
  
  13.     Button,
    14. 
  
  
  
  
  14.   },
    15. 
  
  
  
  
  15.   data() {
    16. 
  
  
  
  
  16.     return {
    17. 
  
  
  
  
  17.       direction: "top",
    18. 
  
  
  
  
  18.       pinPadding: 0,
    19. 
  
  
  
  
  19.       time: "",
    20. 
  
  
  
  
  20.       timer: 0,
    21. 
  
  
  
  
  21.       color: "red",
    22. 
  
  
  
  
  22.     };
    23. 
  
  
  
  
  23.   },
    24. 
  
  
  
  
  24.   methods: {
    25. 
  
  
  
  
  25.     showToast() {
    26. 
  
  
  
  
  26.       Toast("字体颜色已改蓝色");
    27. 
  
  
  
  
  27.       this.color = "blue";
    28. 
  
  
  
  
  28.     },
    29. 
  
  
  
  
  29.     handleClick() {
    30. 
  
  
  
  
  30.       Dialog({
    31. 
  
  
  
  
  31.         title: "标题",
    32. 
  
  
  
  
  32.         message: "这是一个全局按钮组件",
    33. 
  
  
  
  
  33.       });
    34. 
  
  
  
  
  34.     },
    35. 
  
  
  
  
  35.     initTime() {
    36. 
  
  
  
  
  36.       this.time = dayjs().format("YYYY-MM-DD HH:mm:ss");
    37. 
  
  
  
  
  37.       this.timer = setInterval(() => {
    38. 
  
  
  
  
  38.         this.time = dayjs().format("YYYY-MM-DD HH:mm:ss");
    39. 
  
  
  
  
  39.       }, 1000);
    40. 
  
  
  
  
  40.     },
    41. 
  
  
  
  
  41.   },
    42. 
  
  
  
  
  42.   created() {
    43. 
  
  
  
  
  43.     this.initTime();
    44. 
  
  
  
  
  44.   },
    45. 
  
  
  
  
  45.   beforeUnmount() {
    46. 
  
  
  
  
  46.     clearInterval(this.timer);
    47. 
  
  
  
  
  47.   },
    48. 
  
  
  
  
  48. });
    49. 
  
  
  
  
  49. 
  
  
  
  
  50. 
  
  
  
  
    52. 
  
  
  
  
  52. .text-color {
    53. 
  
  
  
  
  53.   color: var(--color);
    54. 
  
  
  
  
  54. }
    55. 
  
  
  
  
  55.
  •  tsx写法
 
 
 
 
    
  
  
  
  
  1. import { ref, reactive } from "vue";
    2. 
  
  
  
  
  2. import { AddressList, NavBar, Toast, Popup } from "vant";
    3. 
  
  
  
  
  3. import AddressEdit from './AddressEdit'
    4. 
  
  
  
  
  4. import router from '@/router'
    5. 
  
  
  
  
  5. 
  
  
  
  
  6. export default {
    7. 
  
  
  
  
  7.   setup() {
    8. 
  
  
  
  
  8.     const chosenAddressId = ref('1')
    9. 
  
  
  
  
  9.     const showEdit = ref(false)
    10. 
  
  
  
  
  10. 
  
  
  
  
  11.     const list = reactive([
    12. 
  
  
  
  
  12.       {
    13. 
  
  
  
  
  13.         id: '1',
    14. 
  
  
  
  
  14.         name: '张三',
    15. 
  
  
  
  
  15.         tel: '13000000000',
    16. 
  
  
  
  
  16.         address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
    17. 
  
  
  
  
  17.         isDefault: true,
    18. 
  
  
  
  
  18.       },
    19. 
  
  
  
  
  19.       {
    20. 
  
  
  
  
  20.         id: '2',
    21. 
  
  
  
  
  21.         name: '李四',
    22. 
  
  
  
  
  22.         tel: '1310000000',
    23. 
  
  
  
  
  23.         address: '浙江省杭州市拱墅区莫干山路 50 号',
    24. 
  
  
  
  
  24.       },
    25. 
  
  
  
  
  25.     ])
    26. 
  
  
  
  
  26.     const disabledList = reactive([
    27. 
  
  
  
  
  27.       {
    28. 
  
  
  
  
  28.         id: '3',
    29. 
  
  
  
  
  29.         name: '王五',
    30. 
  
  
  
  
  30.         tel: '1320000000',
    31. 
  
  
  
  
  31.         address: '浙江省杭州市滨江区江南大道 15 号',
    32. 
  
  
  
  
  32.       },
    33. 
  
  
  
  
  33.     ])
    34. 
  
  
  
  
  34. 
  
  
  
  
  35.     const onAdd = () => {
    36. 
  
  
  
  
  36.       showEdit.value = true
    37. 
  
  
  
  
  37.     }
    38. 
  
  
  
  
  38.     const onEdit = (item: any, index: string) => {
    39. 
  
  
  
  
  39.       Toast('编辑地址:' + index);
    40. 
  
  
  
  
  40.     }
    41. 
  
  
  
  
  41. 
  
  
  
  
  42.     const onClickLeft = () => {
    43. 
  
  
  
  
  43.       router.back()
    44. 
  
  
  
  
  44.     }
    45. 
  
  
  
  
  45. 
  
  
  
  
  46.     const onClickRight = () => {
    47. 
  
  
  
  
  47.       router.push('/todoList')
    48. 
  
  
  
  
  48.     }
    49. 
  
  
  
  
  49. 
  
  
  
  
  50.     return () => {
    51. 
  
  
  
  
  51.       return (
    52. 
  
  
  
  
  52.         
    53. 
  
  
  
  
  53.           
  
  
  
  
  54.             title="地址管理"
    55. 
  
  
  
  
  55.             left-text="返回"
    56. 
  
  
  
  
  56.             right-text="Todo"
    57. 
  
  
  
  
  57.             left-arrow
    58. 
  
  
  
  
  58.             onClick-left={onClickLeft}
    59. 
  
  
  
  
  59.             onClick-right={onClickRight}
    60. 
  
  
  
  
  60.           />
    61. 
  
  
  
  
  61.           
  
  
  
  
  62.             vModel={chosenAddressId.value}
    63. 
  
  
  
  
  63.             list={list}
    64. 
  
  
  
  
  64.             disabledList={disabledList}
    65. 
  
  
  
  
  65.             disabledText="以下地址超出配送范围"
    66. 
  
  
  
  
  66.             defaultTagText="默认"
    67. 
  
  
  
  
  67.             onAdd={onAdd}
    68. 
  
  
  
  
  68.             onEdit={onEdit}
    69. 
  
  
  
  
  69.           />
    70. 
  
  
  
  
  70.           
    71. 
  
  
  
  
  71.             
    72. 
  
  
  
  
  72.           
    73. 
  
  
  
  
  73.         
    74. 
  
  
  
  
  74.       );
    75. 
  
  
  
  
  75.     };
    76. 
  
  
  
  
  76.   }
    77. 
  
  
  
  
  77. };
    78.

结束

不知不觉， Vue 都到3的One Piece时代了， Vue3 的新特性让拥抱 TypeScript 的姿势更加从容优雅， Vue 面向大型项目开发也更加有底气了，点击查看更多。


新闻标题：Vue3+TypeScript完整项目上手教程
网站网址：https://chengdu.cdxwcx.cn/article/dhsjego.html

其他资讯