golden-eagle-manage-web

前端项目介绍

该项目是在node环境下，使用vue(3.0.5)、vue-router(4.0.5)及vuex(4.0.0)开发，基于vite2并提供相应打包服务，搭配element-plusUI框架构建，并以axios封装拦截的的web前端项目

构建

# 安装依赖
npm install

# 在本地主机上进行热加载
npm run dev

# 小型化打包项目
npm run build

有关工作原理的详细说明，请参阅 指南 。

前端编码规范

HTML

1. 结构、样式、行为分离
    确保文档和模板只包含 HTML 结构，样式都放到样式表里，行为都放到脚本里

2. 缩进
    统一二位缩进，不要使用Tab、空格混搭

3. 标签一律使用小写字母
    例:  <!-- Recommended推荐 -->
        <img src="google.png" alt="Google">
        color: #e5e5e5;

4. HTML 注释
    模块注释
      <!-- 文章列表列表模块 -->
      <div class="article-list">
        ...
      </div>

    区块注释
       <!--

        --!>

5. 标签
    遵循 HTML 语义，使用最少的标签并保持最小的复杂度。
    常见标签语义：
      <p> 段落
      <h1> <h2> <h3> 标题
      <ul> 无序列表
      <ol> 有序列表
      <blockquote> 大段引用
      <cite> 一般引用
      <b> 为样式加粗而加粗
      <strong> 为强调内容而加粗
      <i> 为样式倾斜而倾斜
      <em> 为强调内容而倾斜

    Class 与 ID
      class 应以功能或内容命名；
      class 与 id 单词字母小写，多个单词组成时，采用驼峰命名法

    属性顺序
      HTML 属性应该按照特定的顺序出现以保证易读性。
        id
        class
        name
        data-xxx
        src, for, type, href
        title, alt
        aria-xxx, role

    布尔值属性
      HTML5 规范中 disabled、checked、selected 等不用设置值

Css

1. 注释
    组件块和子组件块以及声明块之间使用一空行分隔，子组件块之间三空行分隔；
    /* ==============================
    组件块
    ===============================*/

    /* 子组件块
    ===============================*/
    .selector {
      padding: 15px;
    }

2. 推荐使用 “SASS” CSS扩展语言

3. 慎重选择高消耗的样式
    box-shadows
    border-radius
    transparency
    transforms
    CSS filters

4. 正确使用 Display 的属性
    display 属性会引起回流和重绘，影响页面的渲染，请合理使用。

JavaScript

1. 注释
  单行注释
    必须独占一行。// 后跟两个空格，缩进与下一行被注释说明的代码一致

  多行注释
    /**
     * 这样的多行注释，有多行注释内容时
     */

  函数/方法注释
    函数/方法注释必须包含函数说明，有参数和返回值时必须使用注释标识
    参数和返回值注释必须包含类型信息和说明
    当函数是内部函数，外部不可访问时，可以使用 @inner 标识
     /**
      * 函数描述
      * @param {string} p1 参数p1的说明 （必传）
      * @param {string} p2 参数p2的说明（可选）
      * @return {Object} 返回值描述
      */
      function foo(p1) {
        return {
          p1: p1
        };
      }

    在无参数与返回值情况下，需用单行注释描述函数作用

  文件注释
    文件注释用于告诉不熟悉这段代码的读者这个文件中包含哪些什么。 应该提供文件的大体内容, 作者, 依赖关系。
     /**
      * 文件概述，文件的使用和信息。
      * 对xxx依赖性。
      * 作者名称 xxx
      */

2. 命名
  变量, 函数, 函数的参数, 类的方法和属性, 使用 驼峰 命名法。
  私有属性、变量和方法以下划线 _ 开头。
  常量, 枚举的属性, 使用全部字母大写，单词间下划线分隔的命名方式。
  类, 枚举变量, 使用 帕斯卡 命名法

项目介绍

配置

1. 直连服务器
    当在本地主机上进行热加载并直连服务器时，可在 vite.config.js 下配置多服务器连接目标
    '/device': {
        target: 'xxx',
        changeOrigin: true,
        ws: true,
        rewrite: (path) => path.replace(/^\/device/, '/device')
    },


2. 连接网关
    热加载下可在 .env.development 下的 VITE_BASE_API 属性中配置连接目标
    打包下可在 .env.production 下的 VITE_BASE_API 属性中配置连接目标


3. 其他环节变量
    VITE_TIME_OUT为请求超时时限
    VITE_CATEGORY为项目类型
    VITE_MENUCODE为菜单目录字典

开发

1. 模块
    模块应部署于 @/src/views 文件夹下，使用 驼峰 命名法命名各文件及其对应文件夹

2. 组件
    组件应部署于 @/src/components 文件夹下，使用 驼峰 命名法命名各文件及其对应文件夹

3. 应用及接口
    应用及接口应部署于 @/src/api 文件夹
    使用 驼峰 命名法命名各文件及其对应文件夹

4. 拦截器
    拦截器分为 request 与 download 两部分，并强制传入VITE_CATEGORY参数
    request
        当 api 文件传入对象中的 type 为 JSON 时，为正常请求
        当 api 文件传入对象中的 type 为 FORM 时，为表单式请求，请求头 Content-type 为 application/x-www-form-urlencoded
    download
        当 api 文件传入对象中的 method 为 get 时
            请求头 Content-type 为 application/x-www-form-urlencoded
        当 api 文件传入对象中的 method 为 post 时
            当 api 文件传入对象中的 type 为 JSON 时，请求发送数据为对象，请求头 Content-type 为 application/json
            当 api 文件传入对象中的 type 为 FORM 时，请求发送数据为表单，请求头 Content-type 为 application/x-www-form-urlencoded

5. 工具
    工具应部署于 @/src/utils 文件夹下，使用 驼峰 命名法
    拦截器、正则、存储、用户信息、日期等公用工具下新增函数应新增至已有文件

6. 存储
    内部存储应部署于 @/src/store/index.js 文件中，使用 驼峰 命名法
    外部存储可使用工具 @/src/utils/store.js 下的各函数进行操作

7. 路由
    路由应部署于 @/src/router/index.js 文件中

8. 静态文件
    资源建议放置于 @/src/assets 下

LBY 2021/03/30