一个文笔一般，想到哪是哪的唯心论前端小白。

🧠 - 简介

前面对模板项目进行了一全局的展望，本篇则从细节方面上说明一下具体怎么去想办法解决提出来的问题。

👁️ - 分析

模板项目的使用场景只有一个，就是B端类CURD项目。

第一步、需要考虑的是有哪些通用组件需要择出来，以及为什么要择出来？

第二步、则是如何做到 高内聚、低耦合、易扩展、好上手？

第三步、更多的复杂功能如何支持？主题切换、国际化、水印管理...

🫀 - 拆解

我梳理的通用组件：

• layout：布局，配合布局的还有：
  • header：统一头部及头部工具
  • footer：统一底部及底部工具
  • menu：菜单，主要是纵向菜单
• drawer：抽屉，element-plus提供的抽屉，需要自己声明开关方法，并且需要自己修改头部等等信息，为了保持整站抽屉样式一致，将项目中需要定义的一些样式(padding、header、footer、color)进行预置，改一处，全局变化。并统一暴露 open 和 close 方法。
• dialog：弹窗，和抽屉同理。
• message：提示信息，element-plus 的 ElMessage 是用 js 调用的，其支持配置，单独包一层主要就是为了保存这个配置。
• form：表单
• table：表格（分页）
• chart：图表

做这个的目的就是能够统一调度这些通用组件，至少在扩展业务的时候，原有的逻辑能够很快的融入进来，不会为了配合一个新的业务，而花费很多的时间成本。

我在设计 layout 的时候，增加了几个字段：hasBread、hasFooter、hasAside、hasHeader，在这个基础上进行简单的设计，就可以兼容多个业务场景的页面。例如：登录页面是没有页面布局的，营销页面则只有头部和底部，还有外挂页面，其实是只有 main 部分的。

抽屉和弹窗则是只是把自身的头部和底部进行了预处理，对外暴露了 cancel 和 confirm 并且增加了一个支持扩展其他操作按钮的插槽。

因为表格是一个和同页面内的所有组件都有关联，所以在设计 hooks 的时候，会传入多个 Ref 实例，以保证在任何地方都和在 page 中操作是一样的。

诸如此类的考虑，后面会慢慢的记录。

💪 - 落实

🎺 各命名规范

• 文件夹：中线连接，例如：common-table
• vue文件：大驼峰，顺序依次为 类别 + 模块 + 功能，例如：DialogLoginForm.vue，这样的目的是保证编辑器排序的时候更方便的找到，当然了，需要根据实际情况，最长的话一般三级也就足够了。
• ts/js文件：小驼峰，例如：dataExcmple.ts
• 特殊文件：*.class.ts *.type.ts

文件内部的话就由自己习惯来了，或者根据惯例：常量（全大写）、临时（_xxx）、标签（el-dialog）、标签class名（el-dialog）、js方法名（小驼峰）、js类名（大驼峰）...

🎺 assets 中 styles

styles 里面会有一个 index.scss 被 main.ts 引用，index.scss 则整合了所有的scss样式表：

• base.scss：基础样式
• element-plus：element-plus 自带样式
• element-reset：自己对 element-plus 的覆盖与补充，注意顺序
• iconfont
• mixin
• . . .

🎺 components 中的全局组件

在 components 中有一个 globalPlugin.ts 文件，将需要挂载在全局的组件进行对外暴露，这样就不用在每个 vue 文件中再引入了，很方便。

// globalPlugin.ts

import { App } from 'vue';
import Searcher from './common-form/Searcher.vue';
import Saver from './common-form/Saver.vue';
import BaseTable from './common-table/BaseTable.vue';
import Former from './common-form/Former.vue';
import PageTools from './common-block/CommonPageTools.vue';
import Loger from './common-loger/Loger.vue';
import Drawer from './common-drawer/Drawer.vue'

const globalComp = {
  install(Vue: App) {
    Vue.component('Searcher', Searcher);
    Vue.component('PageTools', PageTools);
    Vue.component('BaseTable', BaseTable);
    Vue.component('Saver', Saver);
    Vue.component('Loger', Loger);
    Vue.component('Drawer', Drawer);
    Vue.component('Former', Former);
  },
};

export default globalComp;

// main.ts
import globalComp from '@/components/globalPlugin';
createApp(App)
  .use(ElementPlus, {
    locale: zhCn,
  })
  .use(globalComp)
  .use(router)
  .use(pinia)
  .mount('#app');

🎺 axios 的功能总结

axios 主要需要考虑几件事情：

1. 全局配置：超时、baseUrl...
2. 拦截器
   • 请求拦截器：对请求的统一处理，如 token 的添加，请求头的处理，防SQL注入...
   • 响应拦截器：
     • 对异常状态的处理：401/403/404/500/...
     • 响应体的预处理，不合法数据的过滤
3. 接口 restful 化，并进行静态方法的扩展，例如：upload、download 等

至于方案，我声明了一个名为 Http 的 class，并挂载了多个静态方法（static）。

• get
• put
• post
• delete
• download

后面需要的话，再加强一下优化程度：

• 取消请求
• 重复请求
• 超时自动重启
• . . .

🎺 message 的全局统一化处理

主要是两个组件的处理：ElMessage 和 ElMessageBox。

我声明了一个名为 Message 的 class，并挂载了多个静态方法（static）。

• error：报错
• success：成功
• warning：警告
• info：文本
• confirm：二次确认
• delete：删除

因为静态方法的存在，所以理论上可以扩展更多的场景。

🛀 - 总结

至此，已经实现了整个模板项目的整体方向。

在麻雀虽小五脏俱全中，已经实现了一个麻雀，但是五脏还待完成。

系列文章:

1. 脚手架开发
2. 模板项目初始化
3. 模板项目开发规范与设计思路
4. layout设计与开发
5. login 设计与开发
6. CURD页面的设计与开发
7. 监控页面的设计与开发
8. 富文本编辑器的使用与页面设开发设计
9. 主题切换的设计与开发并页面
10. 水印切换的设计与开发
11. 全屏与取消全屏
12. 开发提效之一键生成模块(页面)