第Ⅰ章-Ⅰ 了解Vue3 创建一个Vue3项目
第Ⅰ章-Ⅱ Vue3自定义创建项目 项目文件详解
第Ⅰ章-III Vite 创建vue3 项目

Vite

一种新型前端构建工具，能够显著提升前端开发体验。它主要是由两部分组成。

• 快速的冷启动 利用了原生ES模块的特性，在冷启动时，只需要构建和服务当前需要的模块，而不是整个应用程序。这大大减少了启动时间，使开发者可以更快地惊醒开发和调试。

• 热模块替换(HMR) 可以在不刷新整个页面的情况下实时修改后地模块，提高了开发效率。

• 轻量级

• 简单的配置和使用

Vite为Vue提供了第一优先级支持。 Vite官网

安装Vite脚手架

npm 安装

npm install -g create-vite

yarn 安装

yarn global add create-vite

npm 卸载全局安装vite 清理缓存

npm uninstall -g vite
npm cache clean --forec

yarn 卸载全局安装vite 清理缓存

yarn global remove vite
yarn cache clean

最佳的安装方式将vite作为项目的开发依赖

• 项目隔离
• 版本控制
• 易于维护

npm 初始化项目

npm init -y

yarn 初始化项目

yarn init -y

提示：初始化生成基本的package.json
npm 安装vite 开发依赖项

npm install vite --save-dev

yarn 安装vite 开发依赖项

yarn add vite --dev

提示：生产环境不需要vite

创建 Vue3 项目

// vite啊包装全局
vite-create my-vue3-project
//vite局部安装
yarn create vite my-vue3-project
npx vite-create my-vue3-project

npm 安装依赖

cd my-vue3-project
npm install

yarn 安装依赖

cd my-vue3-project
yarn install

npm 启动

npm run dev

yarn 启动

yarn dev

提示：使用Vite创建的项目 会默认会在 package.json 文件中添加 一个名为dev的脚本 用于启动服务器。

和vue cli创建的vue3项目不同。index.html文件在项目根目录中。因为Vite支持在index.html文件中使用模板语法和插值，这样可以更灵活地配置入口文件。