Aimm-vue-ui NPM

A Vue.js 2.0 UI Toolkit for Web.

Aimm-vue-ui 维护说明

git 地址： imm / frontend / aimm-vue-ui · GitLab 浏览器访问： https://aimm-ui.aimmcloud.com/

1. 前言

源码是 element-ui 的 2.X 版本。为 Aimm 公司业务需要，做优化与扩展。

2. 安装

npm install aimm-vue-ui -S  // 安装
npm i    										// 安装依赖
npm run dev  								// 运行

3. 快速上手使用

import Vue from 'vue'
import AimmUI from 'aimm-vue-ui'

Vue.use(AimmUI)

// or
import {
  Select,
  Button
  // ...
} from 'aimm-vue-ui'

Vue.component(Select.name, Select)
Vue.component(Button.name, Button)

For more information, please refer to Quick Start in our documentation.

4. 如何维护某个现有组件？

make 命令使用说明

  make install                         ---  安装依赖
  make new <component-name> [中文名]   ---  创建新组件 package. 例如 'make new button 按钮'
  make dev                             ---  开发模式
  make dist                            ---  编译项目，生成目标文件
  make deploy                          ---  部署 demo
  make pub                             ---  发布到 npm 上
  make new-lang <lang>                 ---  为网站添加新语言. 例如 'make new-lang fr'

主要代码

在 /aimm-element-ui/packages，包含所有ele-ui 原有的组件和 Aimm（就是我们）自己新扩展出的组件。以组件名为目录名

> cd packages
> ls -l
drwxr-xr-x  4 lixiaolong  staff  128  6  8  2021 DemoTest
drwxr-xr-x  4 lixiaolong  staff  128  6  2  2021 Slide
drwxr-xr-x  4 lixiaolong  staff  128  5 19  2021 aimm-files
drwxr-xr-x  4 lixiaolong  staff  128  5 19  2021 aimm-input
drwxr-xr-x  4 lixiaolong  staff  128  5 19  2021 aimm-list
drwxr-xr-x  3 lixiaolong  staff   96  5 19  2021 aimm-list-item
drwxr-xr-x  3 lixiaolong  staff   96  5 19  2021 aimm-option
drwxr-xr-x  3 lixiaolong  staff   96  5 19  2021 aimm-option-group
drwxr-xr-x  4 lixiaolong  staff  128  5 19  2021 aimm-select
drwxr-xr-x  4 lixiaolong  staff  128  5 19  2021 aimm-table
drwxr-xr-x  3 lixiaolong  staff   96  5 19  2021 aimm-upload
drwxr-xr-x  4 lixiaolong  staff  128  5 19  2021 alert
drwxr-xr-x  4 lixiaolong  staff  128  5 19  2021 aside
drwxr-xr-x  4 lixiaolong  staff  128  5 19  2021 autocomplete
drwxr-xr-x  4 lixiaolong  staff  128  5 19  2021 avatar
drwxr-xr-x  4 lixiaolong  staff  128  5 19  2021 backtop
......

打开指定组件同名目录下，就是当前组件的所有 js 和 vue 文件，和 vue-cli 用法一致，抽离mixins、props，data 等完全一样的用法。

文档

/aimm-element-ui/examples/docs 目录下有四个语言的文档（目前只维护中文就好，zh-CN），对应的中文目录下有所有组件同名的“.md” 的文档

注意：当扩展属性或者修改属性时。一定要针对同步说明文档，避免其他开发同学看不懂新属性或者不知道新属性存在

5. 如何添加一个新组件？

例如：新增组件 abc

> make new abc abc 
node build/bin/new.js abc abc

DONE!

make: *** No rule to make target `abc'.  Stop.

届时新增组件的前期准备工作完成，只需要在 /aimm-element-ui/packages/abc 目录下写vue，js 即可。

6. 组件升级后如何发布？

组件升级（所有变动都视为升级），记得要在 CHANGELOG.zh-CN.md 文档下记录此次修改的内容，版本号，格式参照之前的；
更改 package.json 文件内的 "version": "1.0.42"，改为 "version": "1.0.43"，必须修改，否则无法向 npmjs 发布新版本；
确认当前npm命令下登录信息已配置（目前登陆比较麻烦，需要一次性校验密码，每次登陆前会向admin@imaritime.cn 发送动态密码，向 Andrew 索要即可）
```
npm login
username: aimm-fe-team   // 此为管理公司npm账号
password: aimmnpm@@##    // 此为管理公司npm密码
email: admin@imaritime.cn  // 此为管理公司邮箱
```
打包命令： npm run dist，此命令会依次进行清除 -> 打包 -> 校验
发布新版本到 npmjs: npm publish

7. 重要

aimm-vue-ui 目前应用于公司内所有系统，对于组件的调整要严格测试后再向 npmjs 发布新版本，demo文档要写清楚，方便后期使用和维护；
新版本发布后，项目内立即使用可能会出现无法找到安装包，这是因为你的开发机 npm 安装源还没有从 npmjs 官方拉取到最新资源，切换npm源或者等一段时间（不确定时间，最近国内的源很拉胯）重新安装即可解决；
新版本发布后，jenkies 打包发版可能也会遇到无法找到安装包的问题，原因大概率是因为公司内部的 npm 私服没有拉取到最新版本的安装包；