ts定义数组类型_Vue3+TS，写一个逼格满满的项目

戳蓝字"Web前端严选"关注我们哦！

Vue3和TS的概念学了那么多，有没有心动手痒想实践一下呢？

本次千字长文将手把手介绍如何使用Vue3+TS写一个基础项目，有了主要框架概念之后，后续对于应用的开发能更加地得心应手。

1.版本升级

大家之前在做Vue开发时想必都是2.x版本，在这个项目之前要先检查Vue处于哪个版本，本次示例需要4.5.3版本及以上：

vue --version
//@vue/cli 4.5.3

版本升级之后即可创建项目，使用的命令还同之前一样：

vue create project-name

下面展示的是创建示例项目过程中各个步骤的选择内容：

Vue CLI v4.5.8
? Please pick a preset: (Use arrow keys)
  Default ([Vue 2] babel, eslint)  //默认，vue2版本
  Default (Vue 3 Preview) ([Vue 3] babel, eslint) //默认，vue3版本
> Manually select features    //手动选择配置

? Check the features needed for your project: (Press  to select,  to toggle all,  to invert selection)
>(*) Choose Vue version  //选择vue版本
 (*) Babel
 (*) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
 ( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing    

? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
  2.x
> 3.x (Preview)  

? Use class-style component syntax? (y/N)  N
//是否使用类样式组件

? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) N
//不需要babel去配合TS

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y 
//使用路由的历史模式

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
  Less
  Stylus 
//选择CSS预处理器

? Where do you prefer placing config for Babel, ESL