# Vite + Vue3 + Pinia + Vue-Router 项目分析

---

> 该项目来自[CSDN 的 前端大斗师](http://t.csdn.cn/SnJbg)的一个dome Project。这个项目对于初学Vite + Vue3、自学Vite+Vue3、拥有Vue2或Vue3一定知识想尝试官方建议的Vite脚手架的小伙伴，是一个不错的项目模板。

### 前言

该分析是本人在自学中，所分析的结果。仅是本人学习中的一种记录📝。可以用于参考，有不对的地方，请多多指教。

---

![截屏2023-05-12 上午2.01.43](../../../Library/Application%20Support/typora-user-images/%E6%88%AA%E5%B1%8F2023-05-12%20%E4%B8%8A%E5%8D%882.01.43.png)

这是用WebStorm 打开项目的目录结构。

---

分析：

.env 、.env.prod、.gitignore的文件就不过多余的解释了。用来配置项目的环境和git的相关文件。

package.json 是配置项目的配置文件。【主要用来执行框架的和存放开发中所用的包。】

vite.config.js 是配置Vite脚手架的配置文件。【主要实例Vue3 和导入 开发常用的插件。】

Main.js 是vite+ vue3 的主要的核心。这用来创建vue3的。但具体的实例过程是交付给Vite脚手架实例化的，而脚手架的实例化过程可以看看里面的内容。【以及定义全局属性的地方】

其余的文件就挨个分析。

----

#### Views 文件夹：

主要存放Vue的组件【视图】

目录结构：