vue前端项目规范

命名规则

1. 变量

     （1）普通变量
   	 1. 方法：  使用驼峰命名法则 
   	 2. 规范 跟需求的内容相关、复数的时候需要加s
   	 3. 例子：myFirstName
      （2）常量
   	 1. 方法：全部大写
   	 2. 规范：使用大写字母和下划线来组合命名，下划线分割单词
   	 3.  myFirstName： FIRST_NAME
   

2. 组件
   kebab-case
   定义：短横线分隔命名
   列子：Vue.component(‘my-component-name’, { /* … */ })

PascalCase
定义：首字字母大写
例子：Vue.component(‘MyComponentName’, { /* … */ })

3. method
   驼峰式命名，统一使用动词或者动词+名词形式
   例子：jumpPage 、getListData

4. views文件命名
   只有一个文件的情况下不会出现文件夹，而是直接放在 views 目录下面，如 index.vue
   尽量是名词,且使用驼峰命名法
   开头的单词就是所属模块名字（workbenchIndex、workbenchList、workbenchEdit）
   名字至少两个单词（good: workbenchIndex）（bad:workbench）

5. porps命名

   定义时：使用camelCase
   在模板中使用时： kebab-case
   实列
   

：<script>
props: {
  greetingText: String
}
</script>
 
<welcome-message greeting-text="hi"></welcome-message>

6. 项目基本结构

   src 源码目录
   |-- api 接口，统一管理
   |-- assets 静态资源，统一管理
   |-- components 公用组件，全局文件
   |-- filters 过滤器，全局工具
   |-- icons 图标，全局资源
   |-- datas 模拟数据，临时存放
   |-- lib 外部引用的插件存放及修改文件
   |-- mock 模拟接口，临时存放
   |-- router 路由，统一管理
   |-- store vuex, 统一管理
   |-- views 视图目录
   | |-- staffWorkbench 视图模块名
   | |-- |-- staffWorkbench.vue 模块入口页面
   | |-- |-- indexComponents 模块页面级组件文件夹
   | |-- |-- components 模块通用组件文件夹

7. 编码规范

   1.多元素特这个的元素规范
   多个特征撰写，每个特性一行
   例子：

<img
  src="https://vuejs.org/images/logo.png"
  alt="Vue Logo"
>
<my-component
  foo="a"
  bar="b"
  baz="c"
>
</my-component>

2.元素特征性顺序
	原生在前,指令在后
3.组件选项顺序
	- components
	 -. props
	 -. data
	 -. computed
	 -. created
	 -. mounted
	 -. metods
	 -. filter
	 -. watch

8. 注释规范

   单行：使用“//”
   多行：使用：/** **/
   

9. vue优化小技巧

   	 1. 在执行 v-for 遍历的时候，总是应该带上 key 值使更新 DOM 时渲染效率更高。
   

 <ul>
			    <li v-for="item in list" :key="item.id">
			        {{ item.title }}
			    </li>
			</ul>

		 2. 2.v-for 应该避免与 v-if 在同一个元素（例如：<li>）上使用
		
		 3. 3.为了避免样式冲突，整个项目要么全都使用 scoped 特性，
		
		 4. 4.建议不再使用 var，而使用 let / const，优先使用 const

10. css规范

css书写顺序
			1.位置属性(position, top, right, z-index, display, float等)　
			2.大小(width, height, padding, margin)
			3.文字系列(font, line-height, letter-spacing, color- text-align等)　
			4.背景(background, border等)
			5.其他(animation, transition等)
css语法
	1.命名为英文字母，命名应该知道作用，多个单词之间用"-"来连接
	2.省略小于1的小数点前的0，用.5替代0.5
	3.尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff
	避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;。