19.Vue3.x中集成Typescript 使用Typescript

一、Vue3.x集成TypeScript

# 1.Install Vue CLI,if it's not already installed（安装Vue CLI(如果还没有安装)）
npm install --global @vue/cli
# 2.Create a new project,then choose the "Manually select features" option(创建一个新项目，然后选择“手动选择功能”选项)
vue create my-project-name
# 3.If you already have a Vue CLI project without TypeScript,please add a proper Vue CLI plugin:(如果你已经有了一个没有TypeScript的Vue CLI项目，请添加一个合适的Vue CLI插件)
vue add typescript

1. 使用vue/cli脚手架创建vue3项目

   vue create vue-project-demo
   #等待安装完成。。。
   #进入vue-project-demo目录
   cd vue-project-demo
   #运行项目
   npm run serve
   

   打开http://localhost:8080能看到vue页面，说明vue项目创建成功

2. 安装TypeScript依赖

   #使用命令vue add typescript
   D:\MyDocuments\Desktop\vue笔记\code\vue-project-demo>vue add typescript
   
   �  Installing @vue/cli-plugin-typescript...
   
   yarn add v1.22.10
   [1/4] Resolving packages...
   [2/4] Fetching packages...
   info fsevents@2.3.2: The platform "win32" is incompatible with this module.
   info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding
    it from installation.
   info fsevents@1.2.13: The platform "win32" is incompatible with this module.
   info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excludin
   g it from installation.
   [3/4] Linking dependencies...
   [4/4] Building fresh packages...
   success Saved lockfile.
   success Saved 19 new dependencies.
   info Direct dependencies
   └─ @vue/cli-plugin-typescript@4.5.13
   info All dependencies
   ├─ @types/parse-json@4.0.0
   ├─ @types/webpack-env@1.16.0
   ├─ @vue/cli-plugin-typescript@4.5.13
   ├─ at-least-node@1.0.0
   ├─ babel-code-frame@6.26.0
   ├─ builtin-modules@1.1.1
   ├─ diff@4.0.2
   ├─ fork-ts-checker-webpack-plugin-v5@5.2.1
   ├─ fork-ts-checker-webpack-plugin@3.1.1
   ├─ fs-monkey@1.0.3
   ├─ has-ansi@2.0.0
   ├─ js-tokens@3.0.2
   ├─ memfs@3.2.2
   ├─ microevent.ts@0.1.1
   ├─ ts-loader@6.2.2
   ├─ tslint@5.20.1
   ├─ tsutils@2.29.0
   ├─ worker-rpc@0.1.1
   └─ yaml@1.10.2
   Done in 9.57s.
   ✔  Successfully installed plugin: @vue/cli-plugin-typescript
   
   ? Use class-style component syntax? No
   ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, tran
   spiling JSX)? Yes
   ? Convert all .js files to .ts? Yes
   ? Allow .js files to be compiled? Yes
   ? Skip type checking of all declaration files (recommended for apps)? No
   
   �  Invoking generator for @vue/cli-plugin-typescript...
   �  Installing additional dependencies...
   yarn install v1.22.10
   [1/4] Resolving packages...
   [2/4] Fetching packages...
   info fsevents@2.3.2: The platform "win32" is incompatible with this module.
   info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding
    it from installation.
   info fsevents@1.2.13: The platform "win32" is incompatible with this module.
   info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excludin
   g it from installation.
   [3/4] Linking dependencies...
   [4/4] Building fresh packages...
   success Saved lockfile.
   Done in 84.33s.
   ⚓  Running completion hooks...
   
   ✔  Successfully invoked generator for plugin: @vue/cli-plugin-typescript
   

3. 项目中安装sass-loader node-sass，让css支持scss

   npm install -D sass-loader node-sass
   # 安装中...
   # 完成后运行项目
   npm run serve
   # 如果发生错误，可能是sass-loader版本太高所致
   # 先卸载当前安装的版本
   npm uninstall sass-loader
   # 在重新安装10.x的版本
   npm install -D sass-loader@10.x
   # 安装完成后，顺利运行
   

二、Vue3.x集成了TypeScript后定义组件

Vue3.x集成TypeScript后项目的一些改变

入口文件main.js变成main.ts

编写vue组件时的一些变化

需要在script中指定语言

<script lang="ts">

需要引入vue中的"defineComponent"

import {defineComponent} from "vue";

组件默认导出方法包含在defineComponent中

App.vue:

<template>
    <div>根组件</div>
    <hr>
    <v-home<