ei-base-mobile

永达理移动端 Vue 组件库（基于 uni-app）。

安装

npm install ei-base-mobile

快速开始

import Vue from 'vue'
import EI from 'ei-base-mobile'
Vue.use(EI)

按需引入：

import { Introduce, UploadFile, CommonForm } from 'ei-base-mobile'

命令

| 命令 | 用途 | |------|------| | npm run serve | 启动开发服务（默认 --mode dev） | | npm run serve.poc | 启动 POC 模式开发服务 | | npm run build | 生产构建（默认 --mode dev） | | npm run serve.doc | 启动 VuePress 文档站 | | npm run build.doc | 构建 VuePress 文档站 |

已注册组件

| 组件 | 说明 | |------|------| | Introduce | 引导页 | | AreaMobile | 移动端地区选择 | | AutoGraph | 电子签名 | | Verify | 校验码（滑块 / 点选） | | UploadFile | 上传组件 | | VanUploadFile | Vant 风格上传组件 | | SharePanel | 分享面板 | | CommonForm | 表单封装（含 5 个 Picker 子组件：CommonAsyncAreaPicker、CommonDatePicker、CommonFullTimePicker、CommonSinglePicker、CommonYearMonthPicker） | | VideoPage | 视频播放页 | | CommonDialog | 弹层 | | PDFViewer | PDF 预览 | | updateTheme | 主题切换工具函数 |

项目结构

.
├── index.js              # 包入口（自动生成的组件注册列表）
├── packages/             # 组件目录（每个子目录一个组件）
├── ei-common/            # 内部公共包（upload/storage/image 等运行时工具）
├── src/                  # demo 站业务代码（App.vue / views / store / router / api / tool）
├── assets/               # 静态资源（含 vantLang 多语言）
├── plugins/              # Vue 插件、mixin
├── public/               # 公共入口（含 index.html、第三方 script）
├── inject-env-plugin.js  # Vue CLI DefinePlugin 注入（process.env.VUE_APP_* 替换）
├── vue.config.js
├── babel.config.js
└── i18n_tools.config.js

src/tool/ 子目录

按业务模块划分通用工具（具体内容参考目录结构）。

移动端特有规范

• 样式单位：统一使用 rpx（750 设计稿基准），禁止混用 px、rem
• 跨端：基于 uni-app，优先用 uni-app 提供的 API（uni.request、uni.navigateTo 等），避免直接用 axios / window.location 等 web-only 能力
• 多语言：i18n 文案统一维护在 assets/vantLang/locales/，新增语种时同步注册

命名规范

| 类别 | 规则 | |------|------| | 普通变量 | 驼峰命名，复数加 s | | 方法 | 驼峰 + 动词或动词+名词 | | 常量 | 全大写 + 下划线 | | 组件声明 / 引用 | PascalCase（CommonForm、UploadFile） | | 组件使用 | kebab-case（<common-form>、<upload-file>） | | 公用组件前缀 | Common（CommonForm、CommonDialog） | | views/ 文件 | 至少两个单词，驼峰，模块名开头（workbenchIndex、workbenchList） |

Vue 文件基本结构

<template>
  <div>
    <!-- 必须有根 div -->
  </div>
</template>

<script>
export default {
  name: 'MyComponentName',
  components: {},
  props: [],
  data() {
    return {}
  },
  computed: {},
  watch: {},
  methods: {}
}
</script>

<style lang="scss" scoped>
</style>

元素特性顺序

1. class / id / ref / name / data-*
2. src / for / type / href / value / max-length / max / min / pattern
3. title / alt / placeholder
4. aria-* / role / required / readonly / disabled / is
5. v-for / key
6. v-if / v-else-if / v-else / v-show
7. v-cloak / v-pre / v-once
8. v-model
9. v-bind（:）/ v-on（@）
10. v-html / v-text

组件选项顺序

components → props → data → computed → created → mounted → methods → filter → watch

注释规范

• 块注释：/** ... */
• 单行注释：//
• 必须注释：公共组件、重要函数、复杂业务逻辑、特殊 hack、多重 if 判断

/**
 * 组件名称
 * @module 组件存放位置
 * @desc 组件描述
 * @author 组件作者
 * @date 2020-03-27 12:22:43
 * @param {Object} [title] - 参数说明
 * @example <HbTable :title="title" :columns="columns" :tableData="tableData"></HbTable>
 */

编码规范

• ES6：let 定义变量，const 定义常量
• 字符串：静态用单引号 / 反引号，动态用反引号
• 数组 / 对象赋值优先解构
• 避免 this.$parent
• console.log() / debugger 调试完及时删除

指令

• 缩写优先：v-bind → :，v-on → @
• v-for 必须加 :key，循环内唯一
• 避免 v-if + v-for 同时使用

Props

props: {
  status: {
    type: String,
    required: true,
    validator: (value) => ['syncing', 'synced', 'error'].indexOf(value) !== -1
  }
}

SASS 规范

.product-teaser {
  display: inline-block;
  padding: 1rem;

  &:hover { color: black; }
  &:before { content: ''; }

  &.active { background: pink; }

  @media (max-width: 640px) { font-size: 2em; }
}

特殊规范

• 页面级组件：<style lang="scss" scoped>
• 公用 / 全局组件库：倾向 BEM 策略
• public/index.html 引入的第三方 script（如 vuedraggable 依赖的 Sortable）必须保留，不要随版本升级清理