前言：项目基于vue-cli脚手架搭建，适合自身的一套规范
1.项目目录结构规范（有参考vue-element-admin）
这里直接进入src文件里面
api-->axios二次封装，分模块细化接口
assets-->静态资源，图片等
components-->公共组件
directives-->全局自定义指令filters-->公共格式化处理filtericons-->通用图标svg
mixins-->通用mixins,如表格高度自适应
router-->全局路由
store-->状态管理vuex
style-->公共样式，自定义主题覆盖
utils-->工具函数
views-->路由页面
element.import.js-->按需加载组件，公共组件注册
main.js-->入口文件
permission.js-->路由权限处理，路由守卫
settings.js-->全局设置，如站点名称
2.文件命名规范（除基本目录之外）
-
文件夹命名：xxx-xxx
-
文件命名：xxx.js
-
单文件组件命名：页面单组件驼峰双大写，公共组件可以将命名赋予外文件夹，里面用index.vue代替
-
路由页面命名：index.vue
3.单文件组件结构
生命周期按顺序连在一起就行，methods放最后
<template>
<div></div>
</template>
<script>
export default {
props: {},
mixins: [],
components: [],
data() {
return {};
},
computed: {},
watch: {},
mounted(){},
methods: {},
};
</script>
<style scoped></style>
4.Vue文件书写规范 （按结构顺序）
- for循环key值使用唯一id，动态数据不要使用index作为id
- 模板里面{{}}里面不适合过多复杂数据处理，如果需要使用函数或者计算属性处理返回值
- 元素里面有多个属性换行书写，为了观赏性（？？？别整这虚的）
- props每个数据都应定义为一个对象，指定类型与默认值
- mixins大写驼峰 data应为函数，返回响应式数据都以驼峰命名为规范
- computed,watch,methods命名与data一致
- 点击事件命名handleXxx ，回调方法使用箭头函数，规避this指向问题
- 常量命名全大写 const START_TIME=‘xxx’，变量定义用let
5.组件传值
- 普通类型驼峰
- 方法监听@on-xxx=""
暂时先这么多了，欢迎补充
附上Vue官方关于项目风格的网址:
未完待续...
