引用自：
vue官方荔泳、
騰訊全端AlloyTeam 團隊
1 環(huán)境
1.1 代碼工具
推薦VSCode蕉饼、webstorm、sublime玛歌、Atom
統(tǒng)一開發(fā)昧港，盡量使用VSCode，輕量支子、插件多创肥，免費
1.2 工具插件（VSCode）
Vue開發(fā)插件：eslint、HTML CSS Support值朋、HTML Snippets叹侄、Live Server、Vetur昨登、Vue VSCode Snippets
1.3 VSCode設(shè)置
保存時自動按照eslint規(guī)則格式化代碼
{
"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 目錄(文件夾)命名
參照項目命名規(guī)則篙骡；
有復(fù)數(shù)結(jié)構(gòu)時稽坤，要采用復(fù)數(shù)命名法。
例：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引入的文件不需要開頭的'_'和結(jié)尾的'.scss'杖玲；
/* not good */
@import "_dialog.scss";
/* good */
@import "dialog";
2.2.4 HTML文件命名
使用下劃線
jdc.html
jdc_list.html
jdc_detail.html
2.3 組件
- 組件名為多個單詞 （這樣做可以避免跟現(xiàn)有的以及未來的 HTML 元素相沖突，因為所有的 HTML 元素名稱都是單個單詞的淘正。）
- 組件使用大駝峰
export default {
name: 'TodoItem',
// ...
}
Vue.component('todo-item', {
// ...
})
-
基礎(chǔ)組件名 應(yīng)用特定樣式和約定的基礎(chǔ)組件(也就是展示類的摆马、無邏輯的或無狀態(tài)的組件) 應(yīng)該全部以一個特定的前綴開頭，比如
Base鸿吆、App或V囤采。
components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue
components/
|- AppButton.vue
|- AppTable.vue
|- AppIcon.vue
components/
|- VButton.vue
|- VTable.vue
|- VIcon.vue
-
單例組件名 只應(yīng)該擁有單個活躍實例的組件應(yīng)該以
The前綴命名，以示其唯一性惩淳。
components/
|- TheHeading.vue
|- TheSidebar.vue
- 緊密耦合的組件名 和父組件緊密耦合的子組件應(yīng)該以父組件名作為前綴命名蕉毯。
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
- 模板中的組件名大小寫 對于絕大多數(shù)項目來說，在單文件組件和字符串模板中組件名應(yīng)該總是 PascalCase 的——但是在 DOM 模板中總是 kebab-case 的思犁。
<!-- 在單文件組件和字符串模板中 -->
<MyComponent/>
<!-- 在 DOM 模板中 -->
<my-component></my-component>
或者
<!-- 在所有地方 -->
<my-component></my-component>
- 完整單詞的組件名
components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue
- Prop 名大小寫 在聲明 prop 的時候代虾，其命名應(yīng)該始終使用 camelCase，而在模板和 JSX 中應(yīng)該始終使用 kebab-case激蹲。
props: {
greetingText: String
}
<WelcomeMessage greeting-text="hi"/>
