# 前端开发规范 # 前端开发规范 ## CSS 规范 > 推荐前端使用[Stylelint](https://github.com/stylelint/stylelint-config-standard)作为CSS 语法检查。同时推荐遵循如下规范： * 选择Sass或Less作为预处理 * 禁止使用CSS in JS * CSS命名规范 * 使用`flex`布局替换`float` ~~~ .Tceon-PERFOOT -元素块-修饰符 <Header class="Tceon-PERFOOT -header"> <li class="Tceon-PERFOOT -header Tceon-PERFOOT -ul"> <li class="Tceon-PERFOOT -header Tceon-PERFOOT -ul Tceon-PERFOOT -li-lg">test</li> </ul> </Header> ~~~ ## JavaScript规范 > 推荐前端采用[Eslint](https://eslint.org/)作为JavaScript 的语法规范。同时命名遵循如下规范： * 常量全部大写：`const ENV = ‘production’` * 变量全都小写：`const tablename = ‘table’` * 函数首字母小写其余首字母大写：`method(id, name) {}` * 类名驼峰：`class UserAdd{}` ## 其他规范： * HTML 使用语义化标签，禁止滥用`div、span` * 尽量不覆盖第三方开源UI库的样式 * 尽量使用[Lodash](https://github.com/lodash/lodash)函数工具包 * 函数功能单一，且在每个函数必须写明注释，注释包含函数功能，参数说明。 ~~~ /** * 修改用户名 * id：用户id, * name：用户名 */ function method(id, name) { } ~~~ ## 请求封装 * 推荐使用`axios()`作为http库 * 获取数据的方法建议都写在统一的api文件夹中，方便统一修改 ~~~ // 统一请求路径前缀在libs/axios.js中修改 import { getRequest, postRequest, putRequest, postBodyRequest, getNoAuthRequest, postNoAuthRequest } from '@/libs/axios'; // 登陆 export const login = (params) => { return postNoAuthRequest('/login', params) } ~~~ ## 文件结构 > 所有页面和组件目录结构建议使用如下结构 ~~~ ├── api │ └── user.js ├── user │ ├── user.scss/less │ └── user.vue/js ├── components └── index.js ~~~