vue作为前端应用的三大框架之一，其易上手，门槛低。给人简单，高效的感觉。但要写好vue代码，需有一定的规范防止自己逻辑出错，以及提高阅读效率。
1.目录规范及结构
- src文件夹目录结构
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项目代码规范
