Vue3+Vite+TS 项目超细教程搭建

前期版本要求

在开发vue3之前 推荐安装VS Code的官方扩展插件Volar

win+r 执行cmd 先查看node、npm版本
vue3 node必须10.0以上版本！

node -v
v14.17.3
npm -v
7.11.1
// cmd 查看vue版本
vue -V or vue -Version
// 版本 如版本低可看下面👇🏻安装最新
@vue/cli 5.0.4

安装/更新vue3.0

卸载:
首先之前安装的有vue需先清理环境，卸载旧版本

// 如果第一次安装vue 可以不执行
npm uninstall vue-cli -g
// 如没用过yarn可不执行
yarn global remove vue-cli

安装:

npm install -g @vue/cli
// 使用yarn安装
yarn global add @vue/cli

安装vite

提示：需要安装npm或者yarn，其他文章中有讲解
[ vue前期开发环境node及yarn安装详细教程 ]可点击查看(https://blog.csdn.net/tgx908061685/article/details/124482374)
兼容性注意Vite 需要 Node.js 版本 >= 12.0.0。

//使用 NPM
npm init vite@latest

//使用 Yarn
yarn create vite

//使用 PNPM
pnpm create vite

//快速创建vue3+vite项目 需要npm的版本的支持 版本不同命令不同
# npm 6.x
npm init vite@latest my-vue-app --template vue

# npm 7+, 需要额外的双横线：
npm init vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app -- --template vue

---

提示：在D盘建文件夹右键运行windows PowerShell,我使用yarn安装图片如下

输入项目名称 确定

选择vue 然后选择vue 或 vue-ts 我选择的vue-ts 然后点击确定，项目创建完成！

---