WEB前端代码规范

1、 开发环境

编辑器：sublime text3

语言：vue

2、 代码格式化：

借助sublime编辑器，安装HTML-CSS-JS Prettify插件：

a)在Sublime Text 3中，按下Ctrl+Shift+P调出命令面板;

b)输入install 调出 Install Package 选项并回车;

c)输入pretty，并在列表中选择HTML-CSS-JS Prettify后回车即可安装。

d)查看本地安装的NodeJS配置环境路径（在dos命令下，输入where node并回车）。

e) 菜单 -> Preferences -> Packpage Settings -> HTML/CSS/JS Prettify - Set `node` Path，设置一下nodejs路径：

默认对vue不支持,在"allowed_file_extensions": ["htm", "html", "xhtml", "shtml", "xml", "svg", "vue"]加上vue就好了

f）菜单-> Preferences -> Packpage Settings -> HTML/CSS/JS Prettify – Plugin Options -Default，最后"use_editor_indentation": true

g)设置sublime tab size = 4，sublime窗口右下角space/tab size点击，选择tab width=4:

h)安装完成，按快捷键Ctrl + Shift + H即可。

3、 命名规范：

命名需遵从以下原则：

有意义的: 不过于具体，也不过于抽象

简短: 2到3个单词

具有可读性: 以便于沟通交流

a) 小驼峰命名：页面名、页面内变量名、方法名

b) 大驼峰命名：组件文件名、组件名

c) 中划线命名：html模板(css)中的class类名

d) 下划线命名：局部变量

e) 全大写命名：vuex相关事件

4、 vue组件结构化：

按照一定的结构组织，使得组件便于理解。

<template>

 <div>

 <!-- ... -->

 </div>

</template>

<script type="text/javascript">

 export default {

 // 不要忘记了 name 属性，name名与vue文件名保持一致

 name: '',

 // 变量

 data() {},

 // 计算属性

 computed: {},

 // 组件属性、变量

 props: {

 bar: {}, // 按字母顺序

 foo: {},

 fooBar: {},

 },

 // 使用其它组件

 components: {},

 // 生命周期（钩子）函数

created() {},

 mounted() {},

 // 方法

 methods: {},

 // 监听函数

 watch: {},

 };

</script>

<style lang=”scss” scoped>

</style>

5、 scss编写：

采用scss编写样式，

a) <style>标签一点要加上scoped属性

b) 使用{}作用域，避免不同文件之间的样式冲突