前端初步规范（ Vue2.0 + SCSS )
【摘要】 通用：1.编码统一：UTF-8；（特殊项目除外）2.命名单词过长以主意为主可将其他单词进行缩写；（详见各部分命名规范）3.文件以功能模块来划分命名（scss/vue/image）所以代码（vue，scss，js）4.采用Tab键（以2个字符为准）缩进， 代码格式化，保持干净整洁，方便维护修改VUE：1.命名规范： 【1】 模块以原型功能为主命名（模块主要是一级文件夹，同...
通用：
1.编码统一：UTF-8；（特殊项目除外）
2.命名单词过长以主意为主可将其他单词进行缩写；（详见各部分命名规范）
3.文件以功能模块来划分命名（scss/vue/image）所以代码（vue，scss，js）
4.采用Tab键（以2个字符为准）缩进， 代码格式化，保持干净整洁，方便维护修改
VUE：
1.命名规范：
【1】 模块以原型功能为主命名（模块主要是一级文件夹，同一模块页面存放在一个文件夹下）
【2】 页面以页面功能为主命名（不同的模块间可以使用相同的命名页面，路由命名时加入模块名区分）
【3】 以英文命名，全部为小写，以下划线连接，方便查找（不允许出现拼音命名页面的情况）
注：components中的组件可使用页面功能或位置命名，可使用驼峰命名
2.页面结构尽可能简洁，减少不必要的嵌套，并多使用语义化标签，而不是无语义的div和span
3.页面结构如过多或过于复杂，需要必要的注释标注出来
4.由于是.vue文件，script也在其中，所以script的注释很有必要：
/* @method 方法名
* @param { 数据类型 } 参数名 [可选值以'|'隔开] —— 参数值对应的中文标注
*//* @event 点击事件
* @param { 数据类型 } item —— 点击当前获取的对象
*/
/* @function 功能性方法
* @param { 数据类型 } 参数名 [可选值以'|'隔开] —— 参数定义
*/SCSS：
1.命名规范：
【1】由于在.vue中scss是全局引入，所以scss在命名时要注意区分不要造成意外的样式冲突
【2】id以驼峰命名，class以中横向连接，class不要使用驼峰命名，且最多不要超过3个单词
【3】除提权外，所有的选择器前不要限定种类
【4】样式尽量采用和页面结构一样的嵌套结构，但过多过深的嵌套会影响页面加载速度所以尽量不要超过三层的嵌套
（使用父元素&可有效的减少编译后的嵌套，必要时采用@at-root提前scss也可减少嵌套）
// 采用&，编写时为嵌套模式，但编译后仍为第一层级
.index {
with: 100%;
height: 100%;
&-content {
with: 80%;
height: 100%;
&-title {
color: #f00;
}
}
}
// 采用@at-root,可以将内容提前到@at-root后的class下，为空则提到全局
.index {
with: 100%;
height: 100%;
.text {
color: #f0f;
.logo {
width: 40px;
height: 40px;'
@at-root .index{
.title {
font-size: 18px;
}
}
}
}
}
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）