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 然后点击确定,项目创建完成!
在这里插入图片描述



版权声明:本文为tgx908061685原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。