- 持续更新,大家有好的建议也可以提出来
- 20210508 1-14点
1、文件/文件夹命名规范
1、components、views下文件夹/文件命名
2、文件夹命名使用大写字母开头PascalBase风格
3、必须包含index.vue
4、其他文件名以大写开头PascalBase风格
components/Breadcrumb/index.vue
components/Hamburage/ItemDetail.vue
viwes/Home/index.vue
viwes/Article/index.vue
viwes/Article/ArticleDetail.vue
2、*.js文件命名规范
1、属于类的.js文件,除了index.js,其他使用PascalBase风格
2、属于其他类型的.js文件,使用kebab-case风格
3、属于Api的, 统一加上Api后辍
index.js
ParentChidren.js
HomeApi.js
3、*.vue文件命名规范
除index.vue外,其他vue文件统一使用PascalBase风格
eg:
index.vue
ArticleDetail.vue
4、*.less/.scss文件命名规范
统一使用kebab-case命名风格
eg:
article-detail.less / article-detail.scss
5、*.css类名命名规范
统一使用 kebab-case命名风格
eg: .article-container
6、方法命名(采用动词+名词),驼峰式划分语义
eg: doSomething(){}
7、变量命名,驼峰式命名
eg: let myName = 'ken'
8、api信息存放位置
src/api/xxx/xxx
src/api/Admin/UserApi.js 跟菜单一一对应,方便查找
9、公共图片、样式文件存放位置
src/assets
10、自定义图标加载
src/core/icons.js
11、通用全局控件加载
src/core/lazy_use.js
12、通用工具类方法
src/utils/Validation/InputValidation.js 工具类/验证/输入验证
方法必须写清楚注释,最好搭配.md文件说明
13、全局用户业务缓存代码存放位置
src/store/modules/
参考写法跟着写即可,比如字典表缓存,固定常用缓存
src/store/modules/user.js
公共的方法也可以放进来,比如地区选择,很多页面用到,没有必要每个页面都写一个完整的actions方法
14、vue文件书写顺序
- vue 标签内容
- script
-- import 引入组件、库
-- export default 实例化
--- name 为组件选项时起作用
--- components 组件使用
--- props 标签化赋值
--- data 初始化数据,方便渲染
--- created 在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
--- mounted 在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。
--- methods 定义方法
--- computed 用来监控自己定义的变量,该变量不在data里面声明
--- watch 只能监控整个对象或单个变量
--- destroyed 实例销毁后调用。
- style
https://cn.vuejs.org/v2/api/#beforeCreate
https://www.cnblogs.com/gunelark/p/8492468.html
不管用不用都要声明出来,固定顺序
<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>