初识Vite+vue3工程，简单、极速、实用

前端构建工具

💡 极速的服务启动、⚡️ 轻量快速的热重载、🛠️ 丰富的功能、📦 优化的构建、🔩 通用的插件、🔑 完全类型化的API。今天我体验了以下Vite的极致速度，快人一步🚀

简介

Vite（法语意为 “快速的”，发音 /vit/，发音同 “veet”）是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

  • 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）
  • 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。
    Vite 意在提供开箱即用的配置，同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性，并有完整的类型支持。

创建

  • PNPM创建项目(输入项目名称)
1
2
# 使用pnpm包管理工具
pnpm create vite
  • 初识Vite+vue3工程，简单、极速、实用-创建

  • 使用vue框架(上下键选择)
    初识Vite+vue3工程，简单、极速、实用-使用vue框架

  • 使用ts类型
    初识Vite+vue3工程，简单、极速、实用-使用ts类型

  • 安装依赖
    初识Vite+vue3工程，简单、极速、实用-安装依赖1
    初识Vite+vue3工程，简单、极速、实用-安装依赖2

1
2
cd thinks
pnpm install

运行

  • 初识Vite+vue3工程，简单、极速、实用-使用ts类型
1
pnpm dev

看到图下图所示说明你的vite+vue项目创建成功了，赶快打开http://localhost:3000/一探究竟把😁
初识Vite+vue3工程，简单、极速、实用-项目创建成功