初始代码清理

开始写我们的核心代码之前，需要先把项目自带的部分代码或文件删除，主要就是我们的src文件。

env.d.ts定义类型的文件放到types中，并重命名为shims-vue.d.ts，帮助我们告诉TS，Vue文件的一些类型。

在根目录下的index.html文件中更改title并将favicon.ico换成自己的小 logo!

src 构建

也就是围绕Vue3生态对项目技术栈使用的构建，这里我们依然从src目录来看是如何构建的（一般项目通用src目录）。

api 接口文件

通常我们会把所有的接口方法统一放到这个模块中，并在该模块下根据实际的业务需求分别管理对应的接口。比如api文件夹下某个文件夹里面包含的接口对应某个页面（特定页面中使用到了这些特定接口），或者某个文件对应某个业务流。

比如 vben 中的结构：

assets 静态资源文件

这个文件跟public文件一般都用来放外面的图标图片，主要区别就是是否会被构建，assets里的文件是会被构建的。建议分层管理区分不同用途：icons、images、svg

components 文件

前端项目中使用最多的就是组件，我们不仅想复用它们，更想让我们的页面代码更加的结构化、模块化。比如有一个页面，我们只让页面告诉我们这里有几个item（页面结构），页面是由什么组成的。纯页面代码只需要做到这些就行了，这样可以让我们的代码更清晰，item与item之间相互分离，各司其职。而具体的item是什么样，做什么，我们都放到组件里面来，让它们做好自己就行了！

首先我们还需要明确一点，src目录下的components文件一般设计成全局组件供多个页面使用，使用上区别于我们有时候在页面文件中为了达到将该特定页面进行模块化拆分的components文件（局部组件）。那么这里这个组件文件该怎么设计呢？

不用想太多，这不是有现成的吗？Element惊人的的Star数量就不需要多说，针对Vue3的组件库进化版Element-Plus也已经被广泛地使用，并处于高速发展的状态。所以组件怎么做，看Element-Plus就够了，比如，表单组件的文件结构：

可以看到，一个组件主要包括核心的src文件和注册文件index.ts。至于引入的样式style文件，EP(Element-Plus简称)主要是引入其源码中的特定 CSS。我们项目中只是为页面做的组件，而非组件库，这个文件其实可以不要，或者说，有更合适的解决方案（之后会涉及到）。

src内组件的业务代码我们暂时不需要去关注，我们看看EP是怎么注册组件的。

// form 组件的 index.ts
import { withInstall, withNoopInstall } from "@element-plus/utils/with-install";
import Form from "./src/form.vue";
import FormItem from "./src/form-item.vue";

export const ElForm = withInstall(Form, {
  FormItem,
});

export default ElForm;

export const ElFormItem = withNoopInstall(FormItem);

EP 使用了经过封装的组件注册函数withInstall、withNoopInstall，看一下 EP 相关源码：

EP 团队考虑的情况比我们一般的组件注册要复杂的多，我们可以简化一下：

// src/utils/withInstall.ts
import type { App, Plugin } from "vue";

export const withInstall = <T>(component: T, alias?: string) => {
  const comp = component as any;
  comp.install = (app: App) => {
    app.component(comp.name, component);
    if (alias) {
      app.config.globalProperties[alias] = component;
    }
  };
  return component as T & Plugin;
};

// src\components\ReTest\src\test.vue
import { withInstall } from "/@/utils/withInstall";
import test from "./src/test.vue";

export const Test = withInstall(test);

使用

如果你使用的是setup，那就方便多了。我们只需要在script标签中添加setup，我们不需要对组件进行注册，不需要指定组件名字（setup会自动帮我们以文件名作为组件名），也不需要写export default，相当于就是写一个vue文件了。

具体的封装案例会在后面出专门的一篇讲解组件的设计与封装思路，届时内容会包含多种Vue3组件的封装方式，除了主流setup，还会有jsx写法哦！

config 项目配置

做一些项目逻辑处理，比如项目的全局配置、界面设置

directives 指令封装

Vue3 自定义指令的封装

layouts 项目布局

项目各种布局的开发代码都放在这，一般来说对于后台管理系统，主要有如下三种类型的布局方式：

（八）Vue3-huohuo-admin src构建-上