Vue3项目开发深度规范化指南-引导

IT星宿
464 阅读5分钟

介绍

这是一篇指导你如何使用Vue3进行开发的规范化指南，我将使用我多年开发vue3总结的经验来指导你如何进行大型vue3开发的规范化。。

哪些人需要这篇文章

如果你是前端开发者，这篇文章将有助于提升你的代码规范。

如果你是项目组长，那么一定要阅读本文，它将有利于你组织你的团队写出更加健壮的代码，省去大量的维护成本。

为什么需要这篇文章

现在大多数公司过度轻视前端代码规范化。实际上伴随着前端工程化的诞生，就像是前端界的第二次工业革命。前端已经不再是简单的展示一个死数据，而是拥有了更多的动画、交互效果，甚至以往只在后端完成的数据处理、用户鉴权等业务需求也慢慢的开始迁移到前端来完成。这些都使得前端代码的复杂程度急剧上升，一个项目的代码量超过几十万行已经是家常便饭了。但是现在的前端项目对规范化依然不起重视，导致项目维护困难，起到了1+1<1的负面效果。而这篇文章将有利于树立良好的Vue3项目规范化观念，帮助提升代码可读性，可维护性，可复用性，加速项目开发进程，缩短项目交付周期。

须知

  • 本指南将使用WebStorm编辑器和Vite脚手架构建的Vue3+TypeScript项目。多数时候这些外在因素不会影响阅读本文。
  • 本指南只引导使用更好的规范书写代码，并非技术教程，有关专业技术的术语不会过多解释，有需要可以自行搜索。
  • 规范并不强制要求遵守，你可以挑选你认可的规范遵守。
  • 本专栏中提到的术语有助于更好的理解下文，但这些术语可能并不被官方认可，而是只在本专栏中有效。

引导

在Vue3深度规范化专栏找到本系列的所有文章，或者在下面找到你感兴趣的规范。

你可以在这里快速导航到规范指南

专栏仍在更新中，你想看的正在路上。。。

命名法

本文将会多次提到命名法你应该需要知道：

  • 空格命名法 hello world
  • 短横线命名法 hello-world
  • 下划线命名法 hello_worl
  • 下划线大写命名法 HELLO_WORL
  • 小驼峰命名法 helloWorl
  • 大驼峰命名法HelloWorl

这些比较常用的命名法

项目结构

project
├──README.md // 自述文件
├──public // 公共资源地址
├──dist // 打包目录
├──index.html // 入口文件
├──package.json // 包配置文件
└──src // 源代码
   ├──api // 接口文件
   ├──assets // 资源地址
   ├──components // 公共组件
   ├──layout // 布局组件
   ├──pages // 页面组件
   ├──views // 视图文件
   ├──store // 状态管理
   ├──style // 样式文件
   ├──utils // 工具文件
   ├──App.vue // 根组件
   └──router // 路由文件
      ├──index.ts 创建路由
      └──routes.ts 路由表文件

components、layout、pages、view都是用来放组件的，如何确定组件该放在哪？

components用于存放公共组件，是在整个项目中都有可能会用到的组件，例如Upload组件等。

layout用于存放布局组件，例如侧边栏、顶部导航，底部导航等。

layout
├──components
│  ├──Aside.vue
│  ├──Footer.vue
│  └──Header.vue
└──index.vue

这里的components目录为局部组件，你的目录中应该遍布这种components文件夹来统一存放所有局部组件。这些局部组件的应用应该始终仅限于components目录的父级文件夹之下。例如src/layout/components中的所有组件应只在src/layout下被引用。

术语：

上文中src/layout/components的组件称为局部组件。 而这些局部组件运行被引用的范围src/layout称为局部组件作用域。

views通常配合layout使用，在views中定义的组件将用于替换/layout/index.vue中使用router-view。在后台管理系统中经常用到。但它并不是必须的，你可以使用pages来代替它。

views
├──home
│  ├──components // 只在home中使用的组件
│  └──index.vue // 应注册为'/'路由
└──search
   ├──components // 只在search中使用的组件
   ├──index.vue // 应注册为'/search'路由
   ├──components // 只在search中使用的组件
   └──index.vue // 应注册为'/search'路由

pages用于存放页面组件，目录结构应与路由保持一致，除了其中首页应存放在home目录中。

pages
├──home
│  ├──components // 只在home中使用的组件
│  └──index.vue // 应注册为'/'路由
└──search
   ├──components // 只在search中使用的组件
   └──index.vue // 应注册为'/search'路由

如果需要在pages中使用布局组件，可以参考下面的结构

pages
└──home
   ├──components // 只在home中使用的组件
   ├──layout // 布局组件
   │  ├──components // 只在home/layout中使用的组件
   │  └──index.vue 
   └──views // 用于替换home/layout中router-view

pages可以涵盖views、layout的所有功能。适合更复杂的大型项目，而在管理端这种应用场景多数使用后者。

如果components内的的组件过多，可以适当使用符合语义化的文件夹来分类。

components
├──ImessageType
│  ├──Image.vue
│  └──Text.vue
└──Message.vue

组件名

在任何时候都应该显式的指定组件的名字。

  • 直接被路由引用的组件应使用index.vue为文件名，使用父文件夹的名字作为组件名。
  • 其他情况下组件名字应与文件名一致并采用大驼峰命名法。
  • 在src/components下的组件名应保证全局唯一，而在局部components的组件应保证在其局部组件作用域内唯一。

术语

通常.vue结尾的文件称为组件，而直接被注册到router内的文件称为视图组件

文件名

  • 项目文件夹使用短横线命名法
  • 其他文件夹使用小驼峰命名法
  • 组件文件名使用大驼峰命名法
  • 视图组件文件名使用下划线命名法
  • 其他文件名使用下划线命名法

专栏正在更新中，欢迎订阅！

avatar
文章
阅读
粉丝