# 前端开发规范

1、项目名称
全部采用小写方式，以横线分隔或以下划线分隔
例：my-project-name
2、目录名称:有复数结构时，要采用复数命名法
例：scripts, styles, images, datas
4、文件名称:js文件名、scss文件名:采用中间连字符(*+"-"+*)
例：account-model.js、account-model.scss
5、vue文件名：中间连字符
例如：account-model/index.vue,account-model/components/page.vue
6、vue页面中的 name 属性：中间连字符 （name必填且唯一）
例如：y-title
7、文件夹名称：中间连字符
例如：my-document
8、data变量：小驼峰。例如：dataName:'',根据不同类型添加初始数据声明：
    1)对于初始值是字符串类型的字段：userName:''
    2)对于初始值是 数组类型 的字段：userList:[]
    3)对于初始值是 对象类型 的字段：userInfo:{} 或时间对象：nowTime:new Date()
    4)对于初始值是 布尔类型 的字段：isUserEdit:false 或 isUserEdit:true
    5)对于初始值是 数字类型 的字段：userNum:0 或没有初始值的时候 userNum:NaN

9、方法命名：小驼峰
例如：myMethod()
10、组件引入：大驼峰
例如：import GCardHeader from '@/components/g-card-header/index.vue'
 components: {
    GCardHeader,
  }
11、样式选择器命名：class和id
    1)、类名命名=>单词+’-’+单词，如fine-home。连字符 '-'
    2)、Id命名=>单词+’_’+单词，如fine_home。下划线连接
12、图片命名规范
    1)、不要用拼音，尽量使用英文
    2)、统一使用下划线 nav_right_back.png
    3)、注意区分倍图@2x 和@3x 的后缀，例如banner_@2x.png
    4)、图片的名称分为头尾两部分，用下划线隔开，
    a、头部表示此图片的大类性质，例如广告，标志，菜单，按钮等
        banner：放置在页面顶部的广告，装饰图案等长方形的图片
        logo：标志性的图片
        button：在页面上位置不固定，并且带有链接的小图片
        menu：在页面中某一位置连续出现，性质相同的链接栏目的图片
        pic：装饰用的图片
        title：不带链接表示标题的图片
    b、尾部结合应用具体命名，比如：
        banner_sohu.gif, banner_sina.gif
        menu_aboutus.gif,menu_job.gif
        title_news.gif
        logo_police.gif
        pic_people.gif

{
    path: "/login-module/login", //登录页，命名：连字符'-'链接
    name: "login",
    meta: {
        needLogin: false,
        title: "登录页"
    },
    component: () => import(/* webpackChunkName: "loginModule" */"@/views/login-module/login/index.vue")
},
{
    path: "/login-module/reset-pwd", //重置密码页，命名：连字符'-'链接
    name: "reset-pwd",
    meta: {
        needLogin: false,
        title: "重置密码页"
    },
    component: () => import(/* webpackChunkName: "loginModule" */"@/views/login-module/reset-pwd/index.vue")
}
//路由嵌套
{
    path: "/role-management",
    name: "role-management",
    component: () => import(/* webpackChunkName: "setting" */ "@/views/setting-module/role-mangement"),
    redirect: "/role-management/set-auth",//该文件夹下默认打开的路由
    meta: {
    title: "角色管理"
    },
    children: [
    {
        path: "/role-management/set-auth",
        name: "set-auth",
        component: () => import(/* webpackChunkName: "setting" */ "@/views/setting-module/role-mangement/components/set-auth.vue"),
        meta: {
        title: "角色权限设置"
        }
    }
    ]
},

<script>
// 1、引入数据接口
import {commonApi} from "@/api";
export default {
  name: "",
  methods:{
    /**
     * @description:获取表格数据
     * @param {type}
     * @return:
     * @author: chenyt
    */
      getTableData() {
        this.loading = true;
        //2、Api方法，传入接口参数
        commonApi.getListReset(this.pageData.listQuery).then(response => {
          this.tableDatas = response.data.items;
          this.pageData.total = response.data.total;
          // Just to simulate the time of the request
          setTimeout(() => {
            this.loading = false;
          }, 1.5 * 1000);
        });
      }
  }
}
</script>

//定义接口文件
import request from "@/utils/request";
const basePath = "/table";
// get
/**
 * @description:获取重置数据列表
 * @param {type}
 * @return:
 * @author: chenyt
 */
export function getListReset(params) {
  return request({
    url: `${basePath}/list2`,
    method: "get",
    params: params,
  });
}
//post
/**
 * @description:获取二维码
 * @param {type}
 * @return:
 * @author: chenyt
 */
export const getQRCode = function(params) {
  return request({
    url: `${basePath}/getQRCode`,
    method: "post",
    data: params, // 如果请求方式不是post需要将data改为params
  });
};

//接口暴露文件index.js
import * as loginApi from "./modules/login-api";
import * as commonApi from "./modules/common-api";
export { loginApi, commonApi };

## 动画加载

### 如何使用
```js
this.$Loading.show()

this.$Loading.hide()
```js
### API

| name | 描述 | 参数     |
| ---- | ---- | -------- |
| show | 展示 | duration |
| hide | 关闭 | 无       |


### Options

| 参数     | 说明                                           | 类型     | 默认值 |
| -------- | ---------------------------------------------- | -------- | ------ |
| duration | 延迟多少秒自动关闭 当`duration`为0时不自动关闭 | `number` | 0      |

<!--
 * @Description: 首页
 * @Version: 0.1
 * @Autor: chenyt
 -->

/**
 * @description:初始化
 * @param {type}
 * @return:
 * @author: chenyt
 */