一名多年Vue老将的 规范总结

参考VUE官网风格指南

views 文件夹 命名

• 路由页面文件： 英文小写，多英文单词之间用 - 联接(kebab-case)
• 组件文件：英文大驼峰书写(PascalCase)

以下详情说明

路由页面 文件命名

  views/
     |- about/
       |- index.vue
       |- privacy-policy.vue
       |- user-agreement.vue

组件 文件命名

1、英文大驼峰书写(PascalCase)

   components/
     |- RewardItem.vue

2、组件内 name命名

 export default {
   name: 'RewardItem',
   // ...
 }

3、html中 引入组件的标签 名

   // 1、 引入 
   import RewardItem from './components/RewardItem.vue'
  
   // 2、  注册 
   components: {
     RewardItem,
   },  

   // 3、  使用
   <RewardItem :data="item" />  

router.js路由 命名

• 路由的path 和文件夹目录是对应的

以上面about目录为例

 views/
    |- about/
      |- index.vue
      |- privacy-policy.vue
      |- user-agreement.vue

path: '/about/index',

path: '/about/user-agreement',

path: '/about/privacy-policy',

路由自动注册

文件结构

router
├── about.router.js
├── coupon.router.js
└── index.js

coupon.router.js文件内容

export default [
  {
    path: '/coupon/index',
    name: 'couponIndex',
    component: () =>
      import(/* webpackChunkName: "coupon" */ `../views/coupon/index.vue`),
  },
  {
    path: '/coupon/history',
    name: 'couponHistory',
    component: () =>
      import(/* webpackChunkName: "coupon" */ `../views/coupon/history.vue`),
  },
]

index.js 文件内代码

const routerRule = require.context('./', true, /.router.js/)
const otherRoutes = ((r) => r.keys().map((key) => r(key).default))(routerRule)
otherRoutes.forEach((item) => {
  routes.push(...item)
})

routes.push({ path: '*', redirect: '/home/index' })

const router = new VueRouter({
  mode: 'history',
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  },
  routes,
})

store 命名空间+自动注册

文件结构

store
├── index.js
└── modules
    └── test.js

index.js 文件内代码

const files = require.context('./modules', false, /.js$/)
const modules = {}

files.keys().forEach((key) => {
  modules[key.replace(/(./|.js)/g, '')] = files(key).default
})

Vuex.Store({
  modules,
})