Vite搭建Vue3 + TypeScript 项目(NPM)

文章目录

  • 运行环境
  • 使用Vite初始化项目
    • vite提供不同工具的初始化
    • 以NPM为例:

运行环境

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

# 查看Node.js版本
node -v

# 使用 nvm 安装最新稳定版 Node.js
nvm install stable

# 查看npm版本
npm -v

实际环境:

Node.js:v18.12.0

NPM:8.19.2

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

使用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

以NPM为例:

1、输入项目名称
默认项目名称: vite-project
Vite搭建Vue3 + TypeScript 项目(NPM)_第1张图片
2、选择框架
Vite搭建Vue3 + TypeScript 项目(NPM)_第2张图片3、选择typescript
Vite搭建Vue3 + TypeScript 项目(NPM)_第3张图片4、完成
Vite搭建Vue3 + TypeScript 项目(NPM)_第4张图片5、安装依赖

cd vite-project

npm install

Vite搭建Vue3 + TypeScript 项目(NPM)_第5张图片6、启动项目

npm run dev

Vite搭建Vue3 + TypeScript 项目(NPM)_第6张图片Vite搭建Vue3 + TypeScript 项目(NPM)_第7张图片

你可能感兴趣的:(前端,vue3,vite,typescript,npm)