Filename convension

[tuandm]

Feature request（新功能建议）

This is just a suggestion to standardize filename convention for *.vue and *.js

1. CamelCase for Vue file inside /components except index.vue (since this is default). Ex:

• src/components/Charts/Keyboard.vue
• src/views/charts/Keyboard.vue
• src/views/charts/Line/index.vue

2. kebab-case for js files. Ex:

• src/components/MarkdownEditor/default-options.js
• src/views/svg-icons/require-icons.js

3. Folders: CamelCase for global components and kebab-case for others. Ex:

• src/components/ComponentName/index.vue
• src/views/components-demo/
• src/views/error-page/
• src/directive/el-drag-dialog

[PanJiaChen]

Thank you for your advice. I'll standardize the code later.

[PanJiaChen]

now: src/views/components-demo/backToTop.vue

Which type of .vue file under views folder is better?

• src/views/components-demo/backToTop.vue
• src/views/components-demo/BackToTop.vue
• src/views/components-demo/back-to-top.vue

[tuandm]

I'd go for src/views/components-demo/BackToTop.vue, but src/views/components-demo/back-to-top.vue is still fine regarding Vue's suggestion. PascalCase will be useful for searching by component name, for example people tend to type for BackToTop to find the file instead of back-to-top.

[PanJiaChen]

After thinking, I decided to adopt this type:
src/views/components-demo/back-to-top.vue

The reasons are as follows:

• The naming rules for kebab-case are also recommended by vue officials.
• The .vue file below views folder represents a route, so it needs to be distinguished from the component (component is PascalCase)
• Page url is kebab-case, so the view of the url should also be consistent.

DEMO:

{
	path: 'export-excel',
	component: () => import('@/views/excel/export-excel'),
	name: 'ExportExcel',
	meta: { title: 'Export Excel' }
}

[tuandm]

@PanJiaChen Although this topic has been closed already, but I think my question would be best to place here.
Continue on kebab-case topic, is there the way to apply for store/modules/tagsView.js and store/modules/errorLog.js?
We can use camelcase package to convert tags-view to tagsView, for example:

// File: src/store/index.js
import camelCase from 'camelcase';
...
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // set './app.js' => 'app'
  const moduleName = camelCase(modulePath.replace(/^\.\/(.*)\.\w+$/, '$1'));
  const value = modulesFiles(modulePath);
  modules[moduleName] = value.default;
  return modules;
}, {});