Vite搭建Vue3 + TypeScript 项目(Yarn)

运行环境

Node.js

请确保你的电脑上成功安装 Node.js，本项目使用 Vite 构建工具，需要 Node.js 版本 >=12.2.0（建议将Node.js升级到最新的稳定版本）。

# 查看Node.js版本
node -v
# 使用 nvm 安装最新稳定版 Node.js
nvm install stable

Node.js是一个基于Chrome V8引擎的JavaScript运行环境

yarn安装与配置

1、npm安装yarn

# npm全局安装
npm install -g yarn

# 查看yarn版本
yarn -v

2、配置淘宝源

yarn config set registry https://registry.npm.taobao.org -g
yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g

实际环境：

Node.js：v18.12.0

Yarn：1.22.19

Vite初始化项目

Vite1官方地址：https://vitejs.dev/
Vite2官方地址https://v2.vitejs.dev/

vite提供不同工具的初始化

• 使用NPM

npm create vite@latest

注：@vitejs/app已弃用，使用npm init vite

• 使用Yarn

yarn create vite

• 使用PNPM

pnpm create vite

还可以通过其他命令行选项直接指定项目名和使用的模板，本项目要构建 Vite + Vue3 + TypeScript 项目，则运行：

# npm 6.x
npm create vite@latest my-vue-app --template vue-ts

# npm 7+（需要加上额外的双短横线）
npm create vite@latest my-vue-app -- --template vue-ts

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

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

以Yarn为例：

1、输入项目名称
默认项目名称: vite-project

2、选择框架
3、选择Typescript
4、完成

5、安装依赖

cd vite-project-yarn

yarn

6、启动项目

yarn dev