思维导图
惯例前缀
| 动词 | 含意 | 返回值 |
|---|---|---|
| can | 能不能执行某个动作 | boolean |
| has | 是否蕴含某个值 | boolean |
| is | 是否为某种状况 | boolean |
| get | 获取某个值 | any |
| set | 设置某个值 | 空或者批改后的值 |
| change | 扭转某个值,个别用于批改相同布尔值 | 空或者批改后的值 |
命名标准
| 英文 | 中文 |
|---|---|
| camelCase | 小驼峰式命名法 |
| PascalCase | 大驼峰式命名法 |
| kebab-case | 短横线连贯式 |
| Snake | 下划线连贯式 |
kebab-case 和 Snake区别
btn-submit/btn_submit前者选中单词,后者整个词组选中
前者不能作为变量名,后者能够
我的项目文件名
命名办法：kebab-case
my-project-name图片文件名
命名办法：Snake
my_pic.jpgCSS文件名
命名办法：kebab-case
my-css.cssJS文件名
命名办法：kebab-case
my-js.js组件名
命名办法：PascalCase
MyComponent.vue单例组件名
命名办法：The + PascalCase
跟一般组件命名区别在于前缀加The彰显它的唯一性,惟一在它是不承受任何参数的纯组件,即齐全独立父组件的组件
components/ |- TheGuide.vue |- TheNoticeBar.vue也能够独立用一个前缀目录搁置
components/ |- the/ |- Guide.vue |- NoticeBar.vue前者在应用的时候能够很分明的晓得它的唯一性,后者应用无感知须要从目录构造理解
根底组件名
命名办法：Base+ PascalCase
跟单例组件相同的组件,不蕴含业务纯根底功能型进行高度形象的组件,都是须要传递特定参数实现不同成果
components/ |- BaseButton.vue |- BaseBox.vue |- BasePopup.vue也能够独立用一个前缀目录搁置
components/ |- base/ |- Button.vue |- Box.vue |- Popup.vue前者在应用的时候能够很分明的晓得它的唯一性,后者应用无感知须要从目录构造理解
强耦合组件名
命名办法：父组件前缀+ PascalCase
个别跟父元素是强绑定关系的组件就以父组件为前缀
components/ |- List.vue |- ListItem.vue业务组件
这类组件个别分几种状况:
复用范畴波及多个页面,放组件根目录
components/ |- Business.vue复用范畴仅限单个页面,放页面目录
components/ |- index/ |- Business属于系列组件,放前缀名录
components/ |- popup/ |- Award |- Search
应用命名个别分PascalCase和kebab-case皆可,不过更举荐跟命名统一的用法,不便搜寻应用的中央
props名
申明的时候应用 Snake,应用的时候用 kebab-case
// componentprops:{ greetingText: String}<Component greeting-text="hi"/>route名
命名办法：Snake
// bad{ path: /user_info , // user_info 当成一个单词,搜索引擎无奈辨别语义 name: UserInfo , component: UserInfo},// good{ path: /user-info , // 能解析成 user info name: UserInfo , component: UserInfo},自定义事件
命名办法：kebab-case
命名标准：on + 动词,须要跟原生的辨别
<MyComponent @on-my-event="handleDoSomething" />----------------------------------------------this.$emit('on-my-event')不必驼峰写法的起因两个:
- 事件名不会作为变量或者属性名
v-on事件监听器在Dom模板会主动转换全小写,因为HTML大小写不敏感,用驼峰不容易察觉到
变量
命名办法：camelCase
命名标准：(系列前缀) + 类型 + 对象形容或属性的形式
const showPopupSearch = trueconst showPopupAward = true常量
命名办法：全大写Snake
命名标准：(系列前缀) + 类型 + 对象形容或属性的形式
const TIMEOUT = 10办法
命名办法：camelCase
命名标准：动词 + 名词模式
jumpUrlopenPopup一些非凡办法最好附带类型命名
// normalgetData // 太通用,无奈间接看出数据类型// bettergetRecord // 个别能联想到就是数组类型getList// ORgetXxxAry // 如果无奈联想的间接带上数据类型缩写getXxxObjgetXxxBolVue2代码构造
遵循肯定性能区块法则
内部注入
本身数据
计算/监听属性
生命周期
办法
export default { name: MyComponent , mixins: [], props: {}, data () { return {} }, computed: {}, watch: {} created () {}, mounted () {}, destroyed () {}, methods: {},}</script>Vue3代码构造
自顶向下,通用->关注点逻辑
<script setup>定义外来注入路由Vuex关注点A关注点B...</script>款式书写倡议
- 布局定位属性：display / position / float / clear / visibility / overflow
- 本身属性：width / height / box-sizing / margin / padding / border / border-radius
- 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word / text-shadow
- 背景属性: background / box-shadow
- 动画/2,3D属性: animation / transform
- 其余属性（CSS3）：content / cursor / …