引用自：
vue官方、
腾讯全端AlloyTeam 团队
1 环境
1.1 代码工具
推荐VSCode、webstorm、sublime、Atom
统一开发，尽量使用VSCode，轻量、插件多，免费
1.2 工具插件（VSCode）
Vue开发插件：eslint、HTML CSS Support、HTML Snippets、Live Server、Vetur、Vue VSCode Snippets
1.3 VSCode设置
保存时自动按照eslint规则格式化代码
{
"eslint.validate": [{
"language": "vue",
"autoFix": true
},
{
"language": "html",
"autoFix": true
},
{
"language": "javascript",
"autoFix": true
}
],
"eslint.autoFixOnSave": true,
}
2 命名
2.1 项目命名
全部采用小写方式， 以下划线分隔。 例：my_project_name
2.2 目录(文件夹)命名
参照项目命名规则；
有复数结构时，要采用复数命名法。
例：scripts、styles、images、data_models
image
2.2 文件命名
2.2.1 components
组件命名使用大驼峰(KebabCase)TodoItem.vue
2.2.2 views(pages)
页面命名使用连接符(kebab-case)user-info.vue
如果views下的文件件只有一个文件,命名使用index.vue
│── views
│ └── user_info
│ ├── index.vue
引用例子：
// 引用到 文件夹 + '/'即可
import("../views/user_info/")
2.2.3 JS文件命名
名使用分隔符线resize-event.js
如果为单个单词，使用小写md5.js
2.2.3 CSS, SCSS文件命名
- css使用下划线
jdc.scss
jdc_list.scss
jdc_detail.scss
- scss使用下划线开头,
@import引入的文件不需要开头的'_'和结尾的'.scss'；
/* not good */
@import "_dialog.scss";
/* good */
@import "dialog";
2.2.4 HTML文件命名
使用下划线
jdc.html
jdc_list.html
jdc_detail.html
2.3 组件
- 组件名为多个单词 （这样做可以避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML 元素名称都是单个单词的。）
- 组件使用大驼峰
export default {
name: 'TodoItem',
// ...
}
Vue.component('todo-item', {
// ...
})
-
基础组件名 应用特定样式和约定的基础组件(也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如
Base、App或V。
components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue
components/
|- AppButton.vue
|- AppTable.vue
|- AppIcon.vue
components/
|- VButton.vue
|- VTable.vue
|- VIcon.vue
-
单例组件名 只应该拥有单个活跃实例的组件应该以
The前缀命名，以示其唯一性。
components/
|- TheHeading.vue
|- TheSidebar.vue
- 紧密耦合的组件名 和父组件紧密耦合的子组件应该以父组件名作为前缀命名。
components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue
components/
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue
- 组件名中的单词顺序
components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.vue
- 模板中的组件名大小写 对于绝大多数项目来说，在单文件组件和字符串模板中组件名应该总是 PascalCase 的——但是在 DOM 模板中总是 kebab-case 的。
<!-- 在单文件组件和字符串模板中 -->
<MyComponent/>
<!-- 在 DOM 模板中 -->
<my-component></my-component>
或者
<!-- 在所有地方 -->
<my-component></my-component>
- 完整单词的组件名
components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue
- Prop 名大小写 在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。
props: {
greetingText: String
}
<WelcomeMessage greeting-text="hi"/>
