引用自：
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"/>
