使用vite从头搭建一个vue3项目（一）创建vue3项目

其他文章：
使用vite从头搭建一个vue3项目（二）创建目录文件夹以及添加vue-router
使用vite从头搭建一个vue3项目（三）vite.config.js配置
使用vite从头搭建一个vue3项目（四）使用axios封装request.js文件，并使用proxy解决跨域问题
使用vite从头搭建一个vue3项目（五）非父子组件（兄弟组件）之间传值mitt

一、vite是什么？

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

• 一个开发服务器，它基于原生 ES 模块提供了丰富的内建功能，如速度快到惊人的模块热更新（HMR）。

• 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

下面是 Vite3+ 版本的 nodejs 兼容性：

Vite2版本 需要 Node.js 版本 >= 12.0.0。

vite官网：https://vitejs.cn/

二、使用vite创建一个vue3项目

1. 执行指令。

   // npm 当前指令会使用最新版本的vite，本篇文章书写时，vite版本已经到 5.2.0 了
   npm create vite@latest || npm init vite@latest
   // 若想使用固定版本的vite，比如vite2版本，可以使用以下指令，会创建一个使用["vite": "^2.9.15"]的项目
   npm create vite@2 || npm init vite@2
   

   使用 yarn 包管理器则执行以下指令：

   // yarn
   yarn create vite
   

   pnpm 则是：

   // pnpm
   pnpm create vite
   

2. 输入项目名称。
   
3. 选择项目模板，空格按钮确认。
   
4. 选择变种语言。
   
5. 进入项目目录，执行 npm install 安装 node_modules，启动程序。
   
   

6. 一个最基本的项目目录，可以根据自己的需求修改文件目录。
   

三、使用vue3技术栈（全家桶）中后台管理项目模板

• 若依：https://github.com/yangzongzhuan/RuoYi-Vue3
  若依在线文档：https://doc.ruoyi.vip/

• vue3-admin-template： https://github.com/jzfai/vue3-admin-template
  中文官网：https://github.jzfai.top/vue3-admin-cn-doc/

• coreui-free-vue-admin-template https://github.com/coreui/coreui-free-vue-admin-template

• V3 Admin Vite： https://github.com/un-pany/v3-admin-vite