# emap-h5tag

> h5tag components for EMAP

Latest version **1.0.8** (published 2020-04-08) · 0 weekly downloads

## Install

```sh
npm install emap-h5tag
pnpm add emap-h5tag
yarn add emap-h5tag
bun add emap-h5tag
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2020-04-08 |
| First published | 2018-09-17 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 11 |
| Unpacked size | 5.1 MB |
| Known vulnerabilities | 0 (+26 in 2 direct dependencies) |
| Install scripts | no |
| Author | 金智教育 wisedu |
| Maintainers | wangyongjian |

## Links

- npm: https://www.npmjs.com/package/emap-h5tag
- Homepage: http://github.com/wisedu
- npm.io page: https://npm.io/package/emap-h5tag

## Dependencies (11)

- [vue](https://npm.io/package/vue.md) ^2.5.2
- [axios](https://npm.io/package/axios.md) ^0.16.1
- [moment](https://npm.io/package/moment.md) ^2.19.1
- [core-js](https://npm.io/package/core-js.md) 3.0.0-beta.3
- [bh-iview](https://npm.io/package/bh-iview.md) ^2.3.1
- [vue-router](https://npm.io/package/vue-router.md) ^2.1.1
- [my-local-ip](https://npm.io/package/my-local-ip.md) ^1.0.0
- [babel-runtime](https://npm.io/package/babel-runtime.md) ^6.23.0
- [postcss-import](https://npm.io/package/postcss-import.md) ^11.0.0
- [postcss-loader](https://npm.io/package/postcss-loader.md) ^2.0.8
- [extract-text-webpack-plugin](https://npm.io/package/extract-text-webpack-plugin.md) ^3.0.1

## Recent versions

- 1.0.8 (latest) — 2020-04-08
- 1.0.7 — 2020-04-08
- 1.0.5 — 2019-05-05
- 1.0.4 — 2018-09-20
- 0.0.6 — 2018-09-20
- 0.0.5 — 2018-09-20
- 0.0.4 — 2018-09-20
- 0.0.3 — 2018-09-20
- 0.0.2 — 2018-09-20
- 0.0.1 — 2018-09-20
- 0.0.0 — 2018-09-20
- 1.0.3 — 2018-09-20
- 1.0.2 — 2018-09-20
- 1.0.1 — 2018-09-20
- 1.0.0 — 2018-09-17

## README

# emap-mobile

> emap-mobile 业务组件库

## 开发流程

#### 1、 初始化项目，**必须** 调整package.json中的配置项，关键字段如下：

```json
{
    "name": "emap-h5tag",  //one word, no spaces
    "packageName": "emap-h5tag",   //打包出来的文件名称，npm publish时的包名称，可能需要考虑全球唯一性
    "version": "1.0.0",     //打包时，版本号会跟入包内，npm publish时，每个版本号仅能发布一次
    "main": "dist/emap-h5tag.min.js",  //与packageName的名称一致，仅在npm publish时使用，作为包的入口地址
    ...
}
```

#### 2、 新增组件，规则有两种：

##### 单文件组件，在文件夹 ./src/components 中，直接建立一个组件文件

> * ./src/components/xxx.vue 

> 组件实现文件，具体开发方法见 [VUE单文件组件](https://cn.vuejs.org/v2/guide/single-file-components.html)

##### 多文件组件，在文件夹 ./src/components 中，建立一个文件夹，其中可以包含多个文件

> * ./src/components/xxx/xxx.vue 
> * ./src/components/xxx/xxx-1.vue 

> 打包的时候仅认与文件夹名称相同的文件为该组件的入口

命名规则：多个单词间以 "-" 连接，全部小写


#### 3、 当前库中调试组件，在index.vue中引用该组件，关键点如下：

> * import EmapFlowToolbar from '../../components/emap-flow-toolbar.vue'
> * components: { EmapFlowToolbar },

> html中增加该标签：< emap-flow-toolbar>< /emap-flow-toolbar>

``` bash
# 组件调试环境启动命令，localhost:8080
npm run dev
```

#### 4、 打包生成组件

``` bash
#开发
npm run dev

# 组件编译打包
npm run build

#编译Element css样式
npm run buildcss

#编译element css + 编译emap组件css + 打包组件js
npm run deploy
```

> ./dist/目录下，生成了打包好的组件文件

## 开发注意事项

### 1. 组件打包出来只有一个文件 xxx.min.js，所以请注意：

* 尽量不含有图片文件
* * 如果必须要使用图片，文件请放置在目录 src/assets/ 中，最终打包会以base64的编码方式直接打入min.js的源码中，组件包的体积会变大。 
* * 引用方式必须按照该格式：< img src="../assets/logo.png" >
* * 可能遇到的情况如：上传头像组件中必须带有的默认上传图片
* 如果需要图标，请以样式方式引用外部的字体图标库

### 2. 浏览器运行时报错，不支持原生es6语法

* 打出来的包未经过编译器降级兼容es5处理，这是由于babel编译器未生效，请检查项目根目录下该配置文件是否存在：.babelrc
* windows用户，可以通过sublime Text创建该文件


## 常规运行命令

``` bash
# 初始化安装
cnpm install

# 组件调试环境启动命令，localhost:8080
npm run dev

# 组件编译打包
npm run build
```


## 目录结构说明

```
emap-mobile/
│
├── build/                              打包脚本
│   └── ...        
├── mock/                               本地mock数据存放位置，不会被打包
│   └── data1.json                      访问示例：http://0.0.0.0:8080/mock/data1.json
├── src/                                源码
│   ├── components/                     开发的组件文件
│   │   ├── com1.vue                    com1的实现文件（必须实现）
│   │   ├── com1.js                     com1的打包引用文件（必须实现）
│   │   └── ···/
│   ├── pages/      
│   │   ├── index/
│   │   │   ├── index.vue               调试页，入口页面
│   │   │   └── ···
│   │   └── ···/
│   └── assets/                         图片文件存放目录
│       ├── logo.png
│       └── ···
├── static/                             仅在调试页面中使用的静态资源文件
│   └── mobile/
│       ├── css/
│       │   ├── base.css
│       │   └── style.css
│       └── js/
├── build-components.js                 打包配置（必须修改）
├── package.json                        组件库的配置（必须修改）
└── index.html                          入口页面
```

---
_Source: https://npm.io/package/emap-h5tag · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._