功能越来越多，代码文件容易乱，所以需要停下来重构一下。

文件夹结构

文件夹结构

在 基础上 设置几个文件夹，更好的进行区分。

• packages
  有好多共用的js代码，原本可以封装成单独的资源包，但是由于现在还在完善中，所以需要经常修改，所以就直接引入进来了。
  另外想试试 vite 的 插件，因为发到npm之后，代码会变得很庞大。我有的强迫症，不想弄出来一大堆看不懂的代码。

插件

这个文件夹的名称，可以直接打包发布到npm里面，只是不知道vite里面怎么设置。
或者干脆做成 vite 的插件。

• project
  尝试了一下vite的多页面的方式，因为项目其实是两个单独的项目，想做成两个页面，互相不干扰，好吧其实还是挺干扰的。
  由于某些原因，暂时不能完全分成两个单独的项目，所以只好先这么干了。

• public
  存放 json 文件，用 axios 加载，可以实现热更新的功能。

• src/control-web
  基于 element-plus 封装的各种控件，比如表单控件、查询控件等。以后可能会单独打包。

各种控件

• controller
  MVC里面的 controller，感觉这样组织代码比较方便，和compositionAPI很恰合。
  这个是各个项目共用的，其实里面也没啥代码，主要是管理状态，调用service。

• service
  负责和后端API打交道。
  另外还有前端的数据库，webSQL和indexedDB。
  也是各个项目共用，所以设置区分方式有点头疼。

• sotre-xxx
  按照项目存放状态。
  两个项目总是要有区分的，那么可以在这里做各种设置。

• views/base-page
  存放可以共用的组件，不同项目都可以共用的那种。

• views/XXXX
  各个项目自己的组件，总会有一些不同的需求嘛，可以放在这里。

这样差不多可以清楚一些了吧。

路由和状态呢？

本来用路由了，但是感觉了一下，似乎不需要太复杂的路由，还不如自己做一个呢，好吧其实也没做路由，直接用组件不是很方便吗？

vuex，学会了之后就发现很臃肿，在 vue3 里面完全不需要这么使用，估计官网是为了向下兼容，所以沿用了以前的方式。

所以我自己做了一个简单的，可以很简单的管理状态。目前自我感觉良好。

源码

感兴趣的话可以看看代码。

https://gitee.com/naturefw/nf-plat-vite2-vue3

还有一个在线演示 https://naturefw.gitee.io/nf-plat-vite2-vue3/，当然现在功能很弱，还在不断完善中。
发上去是为了踩踩坑，先熟悉一下情况。