使用Vue3 + vite + TypeScript项目创建步骤

项目搭建

vite

//yarn的下载vite方式
yarn create vite-app 
//or
//npm的下载vite方式
npm init vite-app  

//以上方式自行选择即可

vue-cli

如果已经全局安装过旧版本的vue-cli，先卸载。

yarn global remove vue-cli
//or
npm uninstall vue-cli -g   

安装新版的@vue/cli

yarn global add @vue/cli
//or
npm install -g @vue/cli

//检查下vue版本号
vue -V

//创建项目
vue create 

备注：

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

vue-cli搭建项目

vue3 的更新怎么能少得了 vue-cli 呢， vue-cli 更强调的是用 cli 的方式进行交互式的配置，选择起来更加灵活可控。丰富的官方插件适配，GUI的创建管理界面，标准化开发流程，这些都是 vue-cli 的特点。

选择 手动选择功能 Manually select features

备注： 想要预装什么，就手动check什么（即使前期忘记勾选，后期也可以加装）。

? Check the features needed for your project: (Press  to select,  to toggle all,  to invert selection)
( ) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。 
( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前较少人再用
( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
( ) Router // vue-router（vue路由）
( ) Vuex // vuex（vue的状态管理模式）
( ) CSS Pre-processors // CSS 预处理器（如：less、sass）
( ) Linter / Formatter // 代码风格检查和格式化（如：ESlint）
( ) Unit Testing // 单元测试（unit tests）
( ) E2E Testing // e2e（end to end） 测试

vue add typescript