Vite 创建 Vue3 + TS 项目

  前置条件

在本文中，默认你已经安装了开发环境 Node.js ，博主便不再详细说明，如未安装 Node.js 请参考 开发环境搭建：Node.js安装

 1.创建项目

        因为这里使用的是 Vue 3，所以博主就没有再使用 vue-cli，而是使用新一代前端项目搭建工具 Vite 。

 注：Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

        定位到项目路径下，运行命令行：

# 使用 npm 包管理器
npm create vite@latest


# 使用 yarn 包管理器
yarn create vite


# 使用 pnpm 包管理器
pnpm create vite

构建 Vue 3 项目： 

npm create vite@latest application

 因为我们这里构建的是 Vue 的项目，所以直接选择 Vue (回车确认)：

 

这里我们选择 TypeScript 作为语言 (回车确认)： 

 

2.运行项目

        选择完语言之后，我们的 Vue 脚手架工程就已经创建完了

         然后，我们根据提示，进入到项目根路径下：

cd application

        安装依赖：

npm install

        安装完依赖后，我们就可以直接运行Vue项目了：

npm run dev

        最后，在浏览器上访问地址：http://localhost:5173  即可看到如下所示的欢迎页面

 3.查看Vue版本

        我们可以在项目的根目录下找到 package.json 文件，查看具体的项目信息：

如图可见，我们已经创建了一个Vue 版本为 3.4.29 的一个前端项目