# Vue项目命名规范

前提：前端命名一般是小驼峰式，即helloVue

Vue风格指南 (opens new window)

# 文件夹命名

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

# 文件命名推荐

# 文件

单页面文件组件的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case)。如：

-shop-setting
  > AddShop.vue
  > add-shop.vue

1
2
3

单词大写开头对于代码编辑器的自动补全最为友好，推荐使用，如 AppMain

组件无论是单词大写开头，还是横线连接，在template里引用的时候都是横线连接的。项目封装全局组件的规则是以Mei开头的在components文件夹下面的，都会自动注册为全局组件，在vue里面直接使用即可，如<mei-table></mei-table>

# 路由

路由的path建议文件夹/文件名，方便查找和管理，如product/product-manage 路由懒加载：path写完整路径，alias别名可以简短一点（不配置也可以），name使路由跳转可以简单一点（不配置也可以）。webpackChunkName主要是打包分组识别，同name命名即可。注意path和name的路由跳转方式不同，传参也不同：

// 路由配置
  {
    path: "/product/product-manage",
    alias: '/pd-mg'
    name: "ProductManage",
    component: () => import(/* webpackChunkName: 'ProductManage' */ "@/views/product/product-manage")
  }

  // 另外的写法
  {
    path: "/product/product-manage",
    alias: '/pd-mg'
    name: "ProductManage",
    component: r => require.ensure([], () => r(require('@/views/product/product-manage')), 'ProductManage')
  }
// 页面跳转
  this.$router.push({
    name: "ProductManage",
    params: {id: 123}
  })

  this.$router.push({
    path: '/product/product-manage',
    // path: 'pd-mg',
    query: {id: 123}
  })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 其他

特殊：index.vue或index.js ，index为小写即可

其他如mixins下面的文件，一般小驼峰式命名即可：inputMixin.js，uploadMixin.js

如文件夹存在子文件夹，一般是页面里面的业务组件

-views
 -layout
  -components
   > AppMain.vue
   > index.js
   > Navbar.vue
   > SideBar.vue

1
2
3
4
5
6
7

# vue文件

name

建议一般情况下加上，且跟文件同名，如果文件以横线连接命名，转为大写字母开头。这样在调试时方便查看组件

export default {
  name: 'Navbar'
}

1
2
3

私有属性建议

插件、mixins混入等不对外的，建议使用$_ 前缀

export const testMixin {
    data () {
        return {
            list: []
        }
    },
    methods: {
        $_updateList () {
            this.list.push(1)
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12

普通方法

小驼峰式命名，语义清楚即可，如getInfo获取信息

← Vue原理解析自动加载文件 →