- 持續(xù)更新，大家有好的建議也可以提出來
- 20210508 1-14點
1、文件/文件夾命名規(guī)范
1、components、views下文件夾/文件命名
2、文件夾命名使用大寫字母開頭PascalBase風(fēng)格
3、必須包含index.vue
4、其他文件名以大寫開頭PascalBase風(fēng)格
components/Breadcrumb/index.vue
components/Hamburage/ItemDetail.vue
viwes/Home/index.vue
viwes/Article/index.vue
viwes/Article/ArticleDetail.vue
2、*.js文件命名規(guī)范
1、屬于類的.js文件,除了index.js,其他使用PascalBase風(fēng)格
2、屬于其他類型的.js文件,使用kebab-case風(fēng)格
3、屬于Api的, 統(tǒng)一加上Api后輟
index.js
ParentChidren.js
HomeApi.js
3、*.vue文件命名規(guī)范
除index.vue外，其他vue文件統(tǒng)一使用PascalBase風(fēng)格
eg:
index.vue
ArticleDetail.vue
4、*.less/.scss文件命名規(guī)范
統(tǒng)一使用kebab-case命名風(fēng)格
eg:
article-detail.less / article-detail.scss
5、*.css類名命名規(guī)范
統(tǒng)一使用 kebab-case命名風(fēng)格
eg: .article-container
6、方法命名（采用動詞+名詞），駝峰式劃分語義
eg: doSomething(){}
7、變量命名，駝峰式命名
eg: let myName = 'ken'
8、api信息存放位置
src/api/xxx/xxx
src/api/Admin/UserApi.js 跟菜單一一對應(yīng)，方便查找
9、公共圖片、樣式文件存放位置
src/assets
10、自定義圖標加載
src/core/icons.js
11、通用全局控件加載
src/core/lazy_use.js
12、通用工具類方法
src/utils/Validation/InputValidation.js 工具類/驗證/輸入驗證
方法必須寫清楚注釋，最好搭配.md文件說明
13、全局用戶業(yè)務(wù)緩存代碼存放位置
src/store/modules/
參考寫法跟著寫即可，比如字典表緩存，固定常用緩存
src/store/modules/user.js
公共的方法也可以放進來，比如地區(qū)選擇，很多頁面用到，沒有必要每個頁面都寫一個完整的actions方法
14、vue文件書寫順序
- vue 標簽內(nèi)容
- script
-- import 引入組件、庫
-- export default 實例化
--- name 為組件選項時起作用
--- components 組件使用
--- props 標簽化賦值
--- data 初始化數(shù)據(jù)，方便渲染
--- created 在模板渲染成html前調(diào)用，即通常初始化某些屬性值，然后再渲染成視圖。
--- mounted 在模板渲染成html后調(diào)用，通常是初始化頁面完成后，再對html的dom節(jié)點進行一些需要的操作。
--- methods 定義方法
--- computed 用來監(jiān)控自己定義的變量，該變量不在data里面聲明
--- watch 只能監(jiān)控整個對象或單個變量
--- destroyed 實例銷毀后調(diào)用。
- style
https://cn.vuejs.org/v2/api/#beforeCreate
https://www.cnblogs.com/gunelark/p/8492468.html
不管用不用都要聲明出來，固定順序
image.png
<template>
<div>
${COMPONENT_NAME} page
</div>
</template>
<script>
export default {
name: '',
components: {},
data () {},
created: {},
methods: {},
mounted: {},
computed: {},
watch: {},
destroyed: {}
}
</script>
<style lang="less" scoped>
</style>
