【前端】学习了一段时间的vue,总结一下Vue书写规范第二篇

简介: 命名很重要的

views 下的文件命名

只有一个文件的情况下不会出现文件夹,而是直接放在 views 目录下面,如 index.vue
尽量是名词,且使用驼峰命名法。

开头的单词就是所属模块名字(workbenchIndex、workbenchList、workbenchEdit)
名字至少两个单词(good: workbenchIndex)(bad:workbench)

props 命名规范

在声明 prop 的时候,其命名应该始终使用 camelCase,而在模板中应该始终使用
kebab-case

例外情况
作用域不大临时变量可以简写,比如:str,num,bol,obj,fun,arr。
循环变量可以简写,比如:i,j,k 等。

结构化规范

目录文件夹及子文件规范

以下统一管理处均对应相应模块
以下全局文件文件均以 index.js 导出,并在 main.js 中导入
以下临时文件,在使用后,接口已经有了,发版后清除

src 源码目录

|-- api 接口,统一管理
|-- assets 静态资源,统一管理
|-- components 公用组件,全局文件
|-- filters 过滤器,全局工具
|-- icons 图标,全局资源
|-- datas 模拟数据,临时存放
|-- lib 外部引用的插件存放及修改文件
|-- mock 模拟接口,临时存放
|-- router 路由,统一管理
|-- store vuex, 统一管理
|-- views 视图目录
| |-- staffWorkbench 视图模块名
| |-- |-- staffWorkbench.vue 模块入口页面
| |-- |-- indexComponents 模块页面级组件文件夹
| |-- |-- components 模块通用组件文件夹

以上是vue项目中的 文件基本结构,都是这样组成的。规范的命名和基本的文件结构方便我们更好的理代码和维护代码。

相关文章
|
3天前
|
前端开发 Java 编译器
【前端学java】如何从前端视角快速学习Maven
【8月更文挑战第12天】如何从前端视角快速学习Maven
11 2
【前端学java】如何从前端视角快速学习Maven
|
3天前
|
前端开发 JavaScript Java
SpringBoot+Vue+token实现(表单+图片)上传、图片地址保存到数据库。上传图片保存位置自己定义、图片可以在前端回显(一))
这篇文章详细介绍了在SpringBoot+Vue项目中实现表单和图片上传的完整流程,包括前端上传、后端接口处理、数据库保存图片路径,以及前端图片回显的方法,同时探讨了图片资源映射、token验证、过滤器配置等相关问题。
|
3天前
|
前端开发 数据库
SpringBoot+Vue+token实现(表单+图片)上传、图片地址保存到数据库。上传图片保存位置到项目中的静态资源下、图片可以在前端回显(二))
这篇文章是关于如何在SpringBoot+Vue+token的环境下实现表单和图片上传的优化篇,主要改进是将图片保存位置从磁盘指定位置改为项目中的静态资源目录,使得图片资源可以跨环境访问,并在前端正确回显。
|
3天前
|
JavaScript
Vue学习之--------插槽【默认插槽、具名插槽、作用域插槽】
这篇文章详细介绍了Vue.js中的插槽概念,包括默认插槽、具名插槽和作用域插槽的使用方式和实际应用示例,通过代码演示了如何在组件中定义和使用插槽来实现内容的灵活替换和展示。
Vue学习之--------插槽【默认插槽、具名插槽、作用域插槽】
|
4天前
|
JavaScript
Vue学习之--------Vue中自定义插件(2022/8/1)
这篇文章介绍了Vue中自定义插件的基本概念和实际应用,包括插件的定义、在`main.js`中使用`Vue.use()`引入插件,并通过代码实例展示了如何创建包含全局过滤器、指令和混入的插件,以及如何在Vue组件中使用这些自定义功能。同时,文章还解释了什么是mixin(混入)以及它的使用方式。
Vue学习之--------Vue中自定义插件(2022/8/1)
|
4天前
|
JavaScript 开发工具 git
Vue学习之--------脚手架的分析、Ref属性、Props配置(2022/7/28)
这篇文章分析了Vue脚手架的结构,并详细讲解了`ref`属性和`Props`配置的基础知识、代码实现和测试效果,展示了如何在Vue组件中使用`ref`获取DOM元素或组件实例,以及如何通过`Props`传递和接收外部数据。
Vue学习之--------脚手架的分析、Ref属性、Props配置(2022/7/28)
|
4天前
|
JavaScript 容器
Vue学习之--------组件在Vue脚手架中的使用(代码实现)(2022/7/24)
这篇文章通过代码示例和项目目录结构图,介绍了如何在Vue脚手架中使用组件来实现一个产品列表页。文章详细展示了组件的编写、引入、注册和使用步骤,并提供了实际效果截图。同时,文章还友情提示读者需要使用Vue脚手架来完成这些操作。
Vue学习之--------组件在Vue脚手架中的使用(代码实现)(2022/7/24)
|
4天前
|
JavaScript 程序员
Vue学习之--------组件嵌套以及VueComponent的讲解(代码实现)(2022/7/23)
这篇文章通过代码示例和效果图,详细阐述了Vue中组件的嵌套使用,包括创建组件、组件间的嵌套、注册组件以及实现的效果。同时,文章还介绍了VueComponent的相关知识,包括组件实例对象和Vue实例对象的区别。
Vue学习之--------组件嵌套以及VueComponent的讲解(代码实现)(2022/7/23)
|
4天前
|
JavaScript 容器
Vue学习之--------组件的基本使用(非单文件组件)(代码实现)(2022/7/22)
这篇文章讲解了Vue中组件的基本使用方法,包括组件的定义、注册和使用过程,并通过代码实例演示了非单文件组件的创建和使用,同时指出了一些使用组件时的注意事项。
Vue学习之--------组件的基本使用(非单文件组件)(代码实现)(2022/7/22)
|
2天前
|
缓存 前端开发 JavaScript
前端框架选择指南:React vs Vue vs Angular
React、Vue与Angular是主流前端框架,各有千秋。React专注视图层,学习曲线平缓,生态丰富,适用于中大型项目;Vue简洁易学,模板直观,内置状态管理,适合中小项目及快速原型;Angular全栈框架,结构严谨,适合大型企业应用。React需手动处理状态管理,Vue提供完整CLI加速开发,Angular虽学习曲线陡峭但提供全套解决方案。性能方面,三者均利用虚拟DOM优化渲染。社区支持上,React最为庞大,Vue活跃度高,Angular有Google背书。选型应基于项目需求、团队技能及维护考量。
10 0