前端最终规范


项目规范

项目目录介绍

[========]

├── .github # 自动化 ci 配置(可删除) ├── .vscode # vscode 配置 ├── mock # 本地 mock 数据 ├── node_modules # 项目依赖模块 ├── public │ ├── static # 静态资源 │ ├── favicon.ico # favicon │ ├── favicon_backup.ico # 备份favicon │ └── index.html # 入口 HTML ├── src │ ├── api # API 服务模块 │ ├── assets # 本地静态资源 │ ├── config # 项目配置 │ │ ├── default # 默认配置 │ │ └── config.js # 自定义配置 │ ├── extra # 封装的小工具 │ ├── i18n # 多语言 │ ├── icon # 存放自定义svg图标 ,仅在icon属性为isCustomSvg时才会调用svg图标,如无必要建议使用内置图标 │ ├── router # 路由配置 │ ├── store # vuex 状态管理配置 │ ├── utils # js 工具 │ ├── vab # 核心模块 │ │ |── components # 所有vab组件 | | | ├── VabAppMain # 内页 | | | ├── VabAvatar # 头像 | | | ├── VabBreadcrumb # 面包屑 | | | ├── VabFold # 展开合并 | | | ├── VabFullScreen # 全屏 | | | ├── VabLanguage # 国际化 | | | ├── VabLogo # logo | | | ├── VabNav # 顶部navBar | | | ├── VabNotice # 通知 | | | ├── VabRefresh # 刷新 | | | ├── VabSearch # 搜索 | | | ├── VabSideBar # 左侧菜单 | | | ├── VabTabs # 多标签页 | | | ├── VabTheme # 主题 | | | ├── VabTopBar # 横向布局头部 | | | ├── VabLink # 链接跳转封装 | | | ├── VabMenu # 菜单封装 │ │ | └── VabQueryForm # 顶部查询条件布局封装 │ │ ├── layouts # 界面布局(不需要主题可删除) | | | ├── VabLayoutColumn # 分栏布局 | | | ├── VabLayoutCommon # 常规布局 | | | ├── VabLayoutComprehensive # 综合布局 | | | ├── VabLayoutHorizontal # 横向布局 | | | └── VabLayoutVertical # 纵向布局 │ │ ├── pulgin # vab必要插件 │ │ └── styles # vab主题相关 │ ├── views # 页面组件 │ │ ├── callback # 第三方登录回调页面 │ │ ├── index # 首页 │ │ ├── login # 登录 │ │ ├── mall # 物料市场 │ │ ├── setting # 配置 │ │ ├── register # 注册 │ │ └── vab # 组件页 │ ├── App.vue # 应用入口组件 │ └── main.js # 应用入口js ├── .eslintrc.js # eslint 配置项 ├── babel.config.js # babel-loader 配置 ├── package.json # package.json ├── postcss.config.js # postcss 配置 ├── prettier.config.js # prettier 配置 ├── vab.config.js # vab 配置 └── vue.config.js # vue-cli 配置

vue/cli 配置

位置:src/config/default/cli.config.js

/**
 * @description 导出vue/cli配置
 */
module.exports = {
  //开发以及部署时的URL,hash模式时在不确定二级目录名称的情况下建议使用""代表相对路径或者"/二级目录/",history模式默认使用"/"或者"/二级目录/"
  publicPath: "",
  //生产环境构建文件的目录名
  outputDir: "dist",
  //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
  assetsDir: "static",
  //开发环境每次保存时是否输出为eslint编译警告
  lintOnSave: true,
  //进行编译的依赖
  transpileDependencies: ["vue-echarts", "resize-detector"],
  //开发环境端口号
  devPort: "9999",
  //需要自动注入并加载的模块
  providePlugin: {},
  //npm run build时是否自动生成7z压缩包
  build7z: false,
};

网络配置

位置:src/config/default/net.config.js

/**
 * @description 导出网络配置
 **/
module.exports = {
  //默认的接口地址 如果是开发环境和生产环境走vab-mock-server,当然你也可以选择自己配置成需要的接口地址
  baseURL:
    process.env.NODE_ENV === "development" ? "mock-server" : "mock-server",
  //配后端数据的接收方式application/json;charset=UTF-8 或 application/x-www-form-urlencoded;charset=UTF-8
  contentType: "application/json;charset=UTF-8",
  //最长请求时间
  requestTimeout: 10000,
  //操作正常code,支持String、Array、int多种类型
  successCode: [200, 0, "200", "0"],
  //数据状态的字段名称
  statusName: "code",
  //状态信息的字段名称
  messageName: "msg",
};

路由配置项

语法与 vue-router 语法一致,具体详见src/router/index.js

{
  "hidden": true, //是否显示在菜单中显示隐藏路由(默认值:false)
  "menuHidden": false, //是否显示在菜单中显示隐藏一级路由(默认值:false,除分栏布局有效)
  "alwaysShow": true, //当只有一级子路由时是否显示父路由是否显示在菜单中显示路由(默认值:false)
  "name": "Demo", //首字母大写,一定要与vue文件的name对应起来,用于noKeepAlive缓存控制(该项特别重要)
  "meta": {
    "title": "title", //菜单、面包屑、多标签页显示的名称
    "roles": ["admin", "..."], //当config/settings.js中rolesControl配置开启时,用于控制角色(简写)
    "roles": {
      //当config/settings.js中rolesControl配置开启时,用于控制角色(全写)
      "role": ["admin", "..."],
      "ability": ["READ", "WRITE", "DELETE"], //ability: ["READ","WRITE"],
      "mode": "allOf" //allOf: 数组内所有角色都拥有,返回True oneOf: 数组内拥有任一角色,返回True(等价第1种数据) except: 不拥有数组内任一角色,返回True(取反)
    },
    "remixIcon": "", //旧版remix图标
    "icon": "", //新版
    "isCustomSvgIcon": false, //旧版,是否是自定义svg图标(默认值:false,如果设置true,那么需要把你的svg拷贝到icon/remixIcon下,然后remixIcon字段配置上你的图标名)
    "isCustomSvg": false, //新版,是否是自定义svg图标(默认值:false,如果设置true,那么需要把你的svg拷贝到icon/remixIcon下,然后remixIcon字段配置上你的图标名)
    "noKeepAlive": true, //当前路由是否不缓存(默认值:false)
    "affix": true, //当前路由是否固定多标签页(旧版)
    "noCLosable": true, //当前路由是否可关闭多标签页,同上(新版)
    "badge": "New", //badge小标签(只支持子级)
    "tabHidden": true, //当前路由是否不显示多标签页
    "activeMenu": "", //高亮指定菜单
    "dot": false, //小圆点
    "dynamicNewTab": false // 动态传参路由是否新开标签页
  },
  "children": []
}

样式

scoped

强烈建议使用 scoped ,父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发,调整其子组件根元素的样式。

通过深度选择器自定义子组件样式

该方法同样适用于局部某个组件自定义 element-ui 样式

<style lang="scss" scoped>
::v-deep {
      .el-menu--collapse {
        border-right: 0 !important;

        .el-submenu__icon-arrow {
          right: 10px;
          margin-top: -3px;
        }

        .el-submenu__title {
          span {
            display: none;
          }
        }
      }
    }
</style>

对于常见的布局样式或者公共的一些样式,列如常见的flex 布局之类的,建议在公共样式文件中定义一个class 类, 后期需要的样式直接添加class 减少重复代码。

后端接口联调,必看!!!

方案 1:直接连接方案(记得后端配置跨域)方案 1:直接连接方案(记得后端配置跨域)

修改位置src/config/net.config.js

/**
 * @description 导出网络配置
 **/
module.exports = {
  // 默认的接口地址,开发环境和生产环境都会走/vab-mock-server
  // 正式项目可以选择自己配置成需要的接口地址,如"https://api.xxx.com"
  // 问号后边代表开发环境,冒号后边代表生产环境
  baseURL:
    process.env.NODE_ENV === "development"
      ? "/vab-mock-server"
      : "/vab-mock-server",
};
方案 2:代理连接方案(不推荐方案)

打开 vue.config.js 放开注释,就可以了(记住了,其他的啥都不用改,不用改动 settings.js 的 baseURL,框架会自动将 vab-mock-server 后缀代理到你的后台地址,此方式仅在开发环境临时解决跨域,建议直接后端配置,一劳永逸)

proxy: {
  [baseURL]: {
    target: `http://你的后端接口地址`,//所有配置不要动,只改这一个地方,改完重启项目
    ws: true,
    changeOrigin: true,
    pathRewrite: {
      ["^/" + baseURL]: "",
    },
  },
},

开发、打包注意事项!!!

node 版本与包管理工具 node 版本请安装官网最新正式版 14,node 版本小于 12 无法运行此项目 包管理工具建议使用 cnpm 或 pnpm,使用 npm 或 yarn 安装可能导致图片压缩依赖无法正常安装 布局与主题冗余会导致项目体积较大,访问速度变慢,故建议您选定一种布局或主题后删除其余不需要的布局和主题代码,加快网站访问速度 打包时建议注释掉的功能

主要介绍下,常需要注意的一些地方,主要集中在src目录下

文件夹命名统一采用驼峰式命名始终是单词大写开头 (PascalCase),js文件,vue 文件 变量名采用小驼峰 path:’/pascalCase”,避免定义无效变量,常量命名要大写 const MAX_DECRYPT_BLOCK = 128 1:(view,api) 下页面文件夹命名: 为了方便维护,view下新建文件夹名称要与 api 下接口文件夹名称一致,文件夹命名主要以功能模块代表命名, view 下文件夹的单个vue页面,不要写太多代码,禁止在 src/components 目录下放置业务私有组件,业务私有组件应该在业务相关文件夹下建立components目录存放。 2:vue 单页面中设置名称 name 与文件夹名称路由名称一致。 主要是命名规则的介绍

1.新建页面

2:添加路由

3:新建页面的api

4:新建store

5:配置信息

项目所有的配置信息文件在 src/config 目录下 经常修改的 请求后台baseuRL 配置如下 第一个是开发环境下的,第二个是线上的baseUrl

开发时,跳过登录验证。 项目文件夹下vue.config.js 开发环境时跨域可配置代理(不推荐),建议后台配置跨域,

打包

1:config/net.config.js 设置好baseUrl 2:注释main.js 中的mock 3:image-webpack-loader 报错 cnpm i image-webpack-loader -D 4:项目根目录.env 文件填入您购买时绑定的用户名 5:项目根目录新建.env.local 配置下您购买时根据您用户名发放的 key,注意是新建,不是把.env 复制一份改动!!!!

打包时可能遇到的常见错误

打包报错 Cannot find module 'gifsicle' 方案 1:请使用使用 cnpm 安装,一定 cnpm 安装

项目根目录

cnpm i image-webpack-loader -D

方案 2:去src/config/cli.config.js关闭图片压缩

 module.exports = {
  // npm run build时是否开启图片压缩,由于国内网路原因image-webpack-loader必须使用cnpm安装,如无法使用cnpm,请配置false
  imageCompression: true,
};

打包提示未配置秘钥 打包提示秘钥失效请填写秘钥到 env.local 中

常见问题

vendor 过大问题

建议使用 gzip,使用之后体积会只有原先 1/3 左右,pro 默认已开启

url 去掉

第 1 步:设置src/config/cli.config.js下的配置publicPath不能为空 第 2 步:修改src/config/cli.config.js下的配置routerMode为history 第 3 步:需要后端配合

构建和发布

项目根目录
cnpm i
npm run serve
npm run build

注释

公共组件使用说明
各组件中重要函数或者类说明
复杂的业务逻辑处理说明
特殊情况的代码处理说明,对于代码中特殊用途的变量、存在临界值、函数中使用的 hack、使用了某种算法或思路等需要进行注释描述
多重 if 判断语句
注释块必须以/**(至少两个星号)开头**/
单行注释使用//

其他

1:调试信息 console.log() debugger 使用完及时删除 2:除了三目运算,if,else 等禁止简写 3:判断相等时统一使用 === 而不是 ==; 4:后台返回的数据,接受后做必要的检验,数据是否合理,给出相应异常弹出框提示信息。 5:统一使用es6语法,let const … Array.form() 箭头函数 等等, 6:DOM 元素的 隐藏显示 使用 v-if v-show 而不是 通过 :class=”{}” 生成不同的类名 定义 display:none, 7:对element ui 组件进行二次封装时合理使用 $attrs $listeners 8:this.$nextclick(()=>{}) 正确使用 9:写代码时,尽可能的精简代码,能封装的就尽量抽离出来。 10:减少代码内设置行内样式,尽量定义语义化的class 11:页面中没有使用到的变量,方法等。上传svn前及时删除。

页面列表

ITEM_HTML