
<<<<<<< HEAD
# 前端开发规范
=======

前端开发规范

>>>>>>> 813b62b7db58708b550ad08a428c63ce86afa8c4
---

### I. 文件命名规范

**html,js,scss文件命名统一用小写的英文字母且三个文件名必须相同，若文件名过长可以简写或者有‘-’链接，不得包含汉字空格和特殊字符。**

### 原则：

<<<<<<< HEAD
 * 1）方便理解，见名知义  
 * 2）方便查找
 
 ![](/picture/h.png)
 
=======
* 1）方便理解，见名知义  
* 2）方便查找

  ![](/picture/h.png)

>>>>>>> 813b62b7db58708b550ad08a428c63ce86afa8c4
### II. controller命名规范

**控制器命名统一用 文件名+Ctrl，若文件名拼接则第一个单词首字母小写其余单词首字母大写，如下图所示：**

![](/picture/h4.png)
<<<<<<< HEAD
 
=======

>>>>>>> 813b62b7db58708b550ad08a428c63ce86afa8c4
### III. SCSS文件注册

**当创建一个新SCSS文件后，要在theme目录下app.core.scss文件里import,如下图所示：**

![](/picture/h1.png)

![](/picture/h3.png)

### IV. 前端样式开发注意点

* 1）class选择器在SCSS文件里编写样式时要注意在前面加‘.’ ，如下图所示：

![](/picture/a.png)

* 2）前端布局开发，建议使用flex布局（方便）
* 3）前端样式在写宽度 with时，必须使用百分号（%）来确定宽度，不允许使用px。原因：使用%来确定with，不会随着屏幕的增大而导致样式改变。如下图所示：

![](/picture/a1.png)


<<<<<<< HEAD
=======

>>>>>>> 813b62b7db58708b550ad08a428c63ce86afa8c4
# 前端开发规范

---

### I. 文件命名规范

* html,js,scss文件命名统一用小写的英文字母且三个文件名必须相同，若文件名过长可以简写或者有‘-’链接，不得包含汉字空格和特殊字符。

### 原则：

* 1）方便理解，见名知义  
* 2）方便查找

  ![](/picture/h.png)

### II. controller命名规范

* 控制器命名统一用 文件名+Ctrl，若文件名拼接则第一个单词首字母小写其余单词首字母大写,另外为了方便前台调用需要给每个控制器as一个别名（每个控制器命名和别名的设定必须具有唯一性），如下图所示：

![](/picture/h4.png)

### III. SCSS文件注册

* 当创建一个新SCSS文件后，要在theme目录下app.core.scss文件里import,如下图所示：

![](/picture/h1.png)

![](/picture/h3.png)

### IV. 前端样式开发注意点

* 1）class选择器在SCSS文件里编写样式时要注意在前面加‘.’ ，如下图所示：

![](/picture/a.png)

* 2）前端布局开发，建议使用flex布局（方便）
* 3）前端样式在写宽度 width时，必须使用百分号（%）来确定宽度，不允许使用px。原因：使用%来确定width，不会随着屏幕的增大而导致样式改变。如下图所示：

![](/picture/a1.png)

* 4）前端当一个页面引入了model框，那么要在该页面的scss下方导入model框的scss。如下图所示：

![](/picture/a2.png)



<<<<<<< HEAD
=======


>>>>>>> 813b62b7db58708b550ad08a428c63ce86afa8c4
