1.目录规范及结构

src                        
|--api                   公用接口，统一管理存放文件夹
|--assets                图片存放，建议在存放图片时，按照一个模块一个文件夹进行存放，如是公用图片，则将其放入公用文件夹。
|--components            公用组件存放库，建议每个组件单独一个文件夹
   --index.js            公用组件统一管理文件
|--filters               全局过滤器
|--routers               公用路由配置存放文件夹，建议每个模块单独一个文件夹
  --index.js             路由配置统一文件
|--store                 vuex配置管理
|--styles                全局样式统一管理存放文件夹
|--utils                 公用方法存放文件夹
|--view                  模块组件文件存放文件夹，建议每个模块单独一个文件夹
  |--main                存放首页文件
    |--components        局部组件
        --index.js
    |--pages             模块组件
--App.vue                根组件
--main.js                生成vue实例及全局方法路由引进配置文件
--router.js              可配置路由文件

注：上述目录是博主日常工作采用的文件目录模式，不能说明其好坏，只能说适合自己就好。

组件命名规范
（1）不能使用关键字作为命名
（2）声明用大驼峰命名，即首字母大写
```
  import studentClass from '文件位置' //不推荐
  import StudentClass from  '文件位置' //推荐
```
（3）导入及注册组件时采用大驼峰命名
（4）简短、易理解、可读性好

2.组件内容顺序

vue单文件组件（js写逻辑的）分为三大块，如下：

<template>
  这里写模板（HTML语言）
</template>
<script>
  export default{
    components:{},
    name:'自定义',
    data(){
      return {}//必加，否则报错
    },
    mounted(){},
    methods:{},
  }
</script>
<style lang="scss" scoped>
  这里写局部样式，当然去掉scoped就是全局样式了
</style>

- template部分的规范

首先单文件组件的根标签template下，只能有一对标签

<template>
    <div></div>   <!--正常-->
</template>
<template>
    <div></div>   
    <div></div>   <!--报错-->
</template>

其次建议少用id选择器，尽量用类名进行替换。类名命名要符合语义化，标签尽量用语义化标签。具体请看前端：规范2、前端：规范3

<div id="nav-bar"></div>
//可以替换成
<div class="nav nav-base nav-bar"></div>

这样拆分样式，可以降低代码量，提出公用样式，以及减少维护及二次开发人员的维护或开发难度。

- script 部分的规范

1.放置区域划分

<script>
  import 插件 from '导入文件的位置'
  import 混合 from '导入文件的位置'
  import 组件from '导入文件的位置'
  import 其他 from '导入文件的位置' //导入文件位置
  const NAV_lIST = [];//常量位置
  export default{//vue实例选项位置
    components:{},
    name:'自定义',
    data(){
      return {}//必加，否则报错
    },
    mounted(){},
    methods:{},
  }
</script>

2..vue选项顺序（常用）

|- components
|- model
|- props
|- mixins
|- provide
|- inject
|- name
|- data
|- computed
|- created
|- mounted
|- methods
|- filter
|- watch
|- destroy

2.常量命名
常量命名采用大写，多个单词间用 _下划线分隔。

const pi= Math.PI //不推荐
const PI=Math.PI //推荐 
const myName = 'lin'
const my_name = 'lin'

3.变量命名
变量命名采用小驼峰命名方式，也可以将小写单词用_下滑先相连,单个单词时用小写。

let count = 10 
let all_count = 100
let allCount = 100
let allcount = 100 //不推荐

4.方法命名
方法命名采用动-宾结构，例如：我需要重后台获取菜单数据，可以命名成‘getMenuData’。书写格式采用小驼峰。注意命名时尽量用少量的单词描述清楚该方法是要做什么的。

methods:{
  /**
  *这里是注释
   */
    getMenuList(){
  
  }
}

5.方法注释
写方法注释的目的就是为了让自己或者同事，后续改动时能够快速上手代码，基本上需要的几项如下，当然也可以如上只保留描述：

    /**
     * 方法描述
     * @param {*} params 传入参数描述
     * @author 作者
     * @returns 返回值
     */
    getList(params){
        return params;
    }

3.单页组件代码量规范

一般的单组件文件的代码行数超过300行时，即可以进行拆分文件。当代码行数超过600行时必须对其进行拆分。精简代码。拆分的方法，一般有（目前博主知道的）:

- 利用vue混合(mixins)将某一特定功能的变量，方法集中到一起。

- 将某一特定功能的实现封装成特定的组件

- 将特定功能抽象封装成类（这个估计大神可以）

- 抽取公用方法、样式

4.常用命名动词收集

注:如下的这段命名常用动词，来自史上最全的Vue开发规范。如有侵权请联系博主删除

get 获取/set 设置,
add 增加/remove 删除
create 创建/destory 移除
start 启动/stop 停止
open 打开/close 关闭,
read 读取/write 写入
load 载入/save 保存,
create 创建/destroy 销毁
begin 开始/end 结束,
backup 备份/restore 恢复
import 导入/export 导出,
split 分割/merge 合并
inject 注入/extract 提取,
attach 附着/detach 脱离
bind 绑定/separate 分离,
view 查看/browse 浏览
edit 编辑/modify 修改,
select 选取/mark 标记
copy 复制/paste 粘贴,
undo 撤销/redo 重做
insert 插入/delete 移除,
add 加入/append 添加
clean 清理/clear 清除,
index 索引/sort 排序
find 查找/search 搜索,
increase 增加/decrease 减少
play 播放/pause 暂停,
launch 启动/run 运行
compile 编译/execute 执行,
debug 调试/trace 跟踪
observe 观察/listen 监听,
build 构建/publish 发布
input 输入/output 输出,
encode 编码/decode 解码
encrypt 加密/decrypt 解密,
compress 压缩/decompress 解压缩
pack 打包/unpack 解包,
parse 解析/emit 生成
connect 连接/disconnect 断开,
send 发送/receive 接收
download 下载/upload 上传,
refresh 刷新/synchronize 同步
update 更新/revert 复原,
lock 锁定/unlock 解锁
check out 签出/check in 签入,
submit 提交/commit 交付
push 推/pull 拉,
expand 展开/collapse 折叠
begin 起始/end 结束,
start 开始/finish 完成
enter 进入/exit 退出,
abort 放弃/quit 离开
obsolete 废弃/depreciate 废旧,
collect 收集/aggregate 聚集

注：本文章参考
史上最全的Vue开发规范 ps:该规范强烈推荐，内容条理清晰，很详细
Vue项目代码规范