上手体验Vue3 Vite的魅力（“快，2024前端开发社招面试解答之性能优化

npm install create-vite-app

2、搭建项目

npm init vite-app vite-project

3、 启动项目

cd vite-project

npm install (or yarn)

npm run dev (or yarn dev)

查看项目的目录结构

目录结构跟平时的vue项目差不多，但是仔细观察，index.html文件放到了根目录下。当vite服务启动之后，服务器访问的目录就是该根目录。比如访问http://localhost:3000/package-lock.json

该文件就是我们根目录的package-lock.json

打开package.json，dependencies是vue3.0版本

项目也使用了vue3的新特性，如main.js中引入的是createApp而不是vue

组件里面的template标签下不止一个根标签，这也是vue3的其中一个特性

Vite的工作机制

Vite整体的工作机制，用简单的图表示：