Vue项目文件命名规范

文件夹命名

超过一个单词的统一使用小写字母开头的(kebab-case)命名规范 ,如 shop-setting

文件命名

单文件组件的文件名应该要么始终是单词大写开头 (PascalCase),要么始终是横线连接 (kebab-case)。
单词大写开头对于代码编辑器的自动补全最为友好,推荐使用,如 AppMain
特殊:index.vue/index.js ,index为小写即可
其他如mixins下面的文件,input-mixin.js,upload-mixin.js
如文件夹存在子文件夹,一般是页面里面的业务组件

1574149395275.png

vue文件

  • name
    建议一般情况下加上,且跟文件同名,如果文件以横线连接命名,转为大写字母开头。这样在调试时方便查看组件
    export default {
      name: 'Navbar'
    }
    
1574149945507.png
  • 私有属性
    插件、mixins混入等不对外的,建议使用$_ 前缀
    export const testMixin {
        data () {
            return {
                list: []
            }
        },
        methods: {
            $_updateList () {
                this.list.push(1)
            }
        }
    }
    
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 文件或文件夹的命名遵循以下原则:index.js 或者 index.vue,统一使用小写字母开头的(kebab-c...
    WHU_凌晨_Bin阅读 35,992评论 2 17
  • 这里是官方的 Vue 特有代码的风格指南。如果在工程中使用 Vue,为了回避错误、小纠结和反模式,该指南是份不错的...
    youins阅读 5,758评论 0 5
  • 目的 统一开发风格,使代码结构更加清晰明了。 前提条件 项目是用vue搭建的,前端vue打开项目是需要一个环境运行...
    风凌摆渡人阅读 529评论 1 4
  • title: 风格指南type: style-guide 这里是官方的 Vue 特有代码的风格指南。如果在工程中使...
    ChenyuMa阅读 1,105评论 1 1
  • 本文档摘自Vue官方的编码规范,结合实际项目给出如下规范建议 1、组件名为多个单词 组件名应该始终是多个单词的,根...
    China第一程序员阅读 4,259评论 0 5