open-index/open-npm huggingface dataset:
npm package: @panhezeng/el-multiple-upload
Description: A Vue component
Author: 潘何增
Latest version: 4.0.3

# el-multiple-upload

## 示例

[点击预览](https://panhezeng.github.io/el-multiple-upload/)

组件代码目录 packages/component
示例代码目录 packages/example

## 说明

基于 element-ui 的 el-upload 组件的进一步封装，功能更单一，就是上传多个文件，增加常用功能，比如，检查校验，预览，删除，编辑等

首先请按 element-ui 官方文档安装 element-ui，确保能正常使用 element-ui

修改了 output 方式，通过 require 或 window 方式使用，不需要加.default

事件 this.$emit('request-upload', option)  this.$emit('success-upload', response) this.$emit('error-upload', {err, file}) this.$emit('finish-upload')

使用了 Promise, 请自行解决兼容性

## 用法

### internal vue 方式

`npm i vue element-plus @panhezeng/el-multiple-upload -S`

#### 异步

```vue
<script>
import { defineAsyncComponent } from "vue";
const ElMultipleUpload = defineAsyncComponent(() =>
  import("@panhezeng/el-multiple-upload")
);
export default {
  components: { ElMultipleUpload },
};
</script>
```

#### 同步

```vue
<script>
import ElMultipleUpload from "@panhezeng/el-multiple-upload";
export default {
  components: { ElMultipleUpload },
};
</script>
```

### external vue 方式

```html
<link
  rel="stylesheet"
  href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css"
/>
<script src="//cdn.jsdelivr.net/combine/npm/vue@~3/dist/vue.global.min.js,npm/element-plus,npm/@panhezeng/el-multiple-upload/dist/el-multiple-upload.umd.js"></script>

export default { components: { ElMultipleUpload: window.ElMultipleUpload }, };
```

### 全局安装方式

```js
import { createApp } from "vue";
import App from "./App.vue";
import ElMultipleUpload from "@panhezeng/el-multiple-upload";
const app = createApp(App);
app.use(ElMultipleUpload);
app.mount("#app");
```

## IDE

### WebStorm

搜索 ESLint , 勾选 Automatic ESLint 和 Run eslint -- fix on save

Languages and Frameworks | JavaScript ，选择 Flow
Languages and Frameworks | TypeScript ，service 取消勾选

lerna 使用

```
lerna init
lerna create packagename
```

lerna.json

```
  "version": "independent",  // 不同模块不同版本
  "npmClient": "yarn",  // 指定 npmClent 为 yarn
  "useWorkspaces": true // 将 useWorkspaces 设置为 true
```

顶层的 package.json

```
"workspaces":[
        "packages/*"
        ]
```

```
lerna exec --scope packagename

lerna add packageaname --scope=packagebname

```

## 发版

`lerna version`

## 环境

[构建加速](https://help.aliyun.com/document_detail/202442.html)

- 重置前端依赖环境，cd 到项目目录，删除前端依赖相关文件

  ```shell
  rm -rf node_modules package-lock.json yarn.lock pnpm-lock.yaml
  ```

- 初始化前端环境

  安装 pnpm _Mac 建议使用 `brew install pnpm`_

  ```shell
  curl -fsSL https://get.pnpm.io/install.sh | sh -
  ```

  安装 node

  ```shell
  pnpm env use --global lts && pnpm install -g pnpm npm yarn lerna npm-check-updates
  ```

  ```
  /Users/panhezeng/Library/pnpm/nodejs/16.14.2/pnpm-global/5/node_modules/yarn
  ```
npm package: @panhezeng/el-single-upload
Description: A Vue component
Author: 潘何增
Latest version: 4.0.3

# el-single-upload

## 示例

[点击预览](https://panhezeng.github.io/el-single-upload/)

组件代码目录 packages/component
示例代码目录 packages/example

## 说明

基于 element-ui 的 el-upload 组件的进一步封装，功能更单一，就是上传单个文件，增加常用功能，比如，检查校验，预览，删除，编辑等

首先请按 element-ui 官方文档安装 element-ui，确保能正常使用 element-ui

修改了 output 方式，通过 require 或 window 方式使用，不需要加.default

事件 this.$emit('request-upload', option)  this.$emit('success-upload', response) this.$emit('error-upload', {err, file}) this.$emit('finish-upload')

使用了 Promise, 请自行解决兼容性

## 用法

### internal vue 方式

`npm i vue element-plus @panhezeng/el-single-upload -S`

#### 异步

```vue
<script>
import { defineAsyncComponent } from "vue";
const ElSingleUpload = defineAsyncComponent(() =>
  import("@panhezeng/el-single-upload")
);
import "@panhezeng/el-single-upload/dist/style.css";
export default {
  components: { ElSingleUpload },
};
</script>
```

#### 同步

```vue
<script>
import ElSingleUpload from "@panhezeng/el-single-upload";
import "@panhezeng/el-single-upload/dist/style.css";
export default {
  components: { ElSingleUpload },
};
</script>
```

### external vue 方式

```html
<link
  rel="stylesheet"
  href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css"
/>
<link
  rel="stylesheet"
  href="//cdn.jsdelivr.net/npm/@panhezeng/el-single-upload/dist/style.css"
/>
<script src="//cdn.jsdelivr.net/combine/npm/vue@~3/dist/vue.global.min.js,npm/element-plus,npm/@panhezeng/el-single-upload/dist/el-single-upload.umd.js"></script>

export default { components: { ElSingleUpload: window.ElSingleUpload }, };
```

### 全局安装方式

```js
import { createApp } from "vue";
import App from "./App.vue";
import ElSingleUpload from "@panhezeng/el-single-upload";
import "@panhezeng/el-single-upload/dist/style.css";
const app = createApp(App);
app.use(ElSingleUpload);
app.mount("#app");
```

## IDE

### WebStorm

搜索 ESLint , 勾选 Automatic ESLint 和 Run eslint -- fix on save

Languages and Frameworks | JavaScript ，选择 Flow
Languages and Frameworks | TypeScript ，service 取消勾选

lerna 使用

```
lerna init
lerna create packagename
```

lerna.json

```
  "version": "independent",  // 不同模块不同版本
  "npmClient": "yarn",  // 指定 npmClent 为 yarn
  "useWorkspaces": true // 将 useWorkspaces 设置为 true
```

顶层的 package.json

```
"workspaces":[
        "packages/*"
        ]
```

```
lerna exec --scope packagename

lerna add packageaname --scope=packagebname

```

## 发版

`lerna version`

## 环境

[构建加速](https://help.aliyun.com/document_detail/202442.html)

- 重置前端依赖环境，cd 到项目目录，删除前端依赖相关文件

  ```shell
  rm -rf node_modules package-lock.json yarn.lock pnpm-lock.yaml
  ```

- 初始化前端环境

  安装 pnpm _Mac 建议使用 `brew install pnpm`_

  ```shell
  curl -fsSL https://get.pnpm.io/install.sh | sh -
  ```

  安装 node

  ```shell
  pnpm env use --global lts && pnpm install -g pnpm npm yarn lerna npm-check-updates
  ```

  ```
  /Users/panhezeng/Library/pnpm/nodejs/16.14.2/pnpm-global/5/node_modules/yarn
  ```
npm package: @panhezeng/generator-tinymce-plugin
Description: generator tinymce plugin
Author: 潘何增
Latest version: 0.6.0

# generator-tinymce-plugin [![Coverage Status](https://coveralls.io/repos/github/panhezeng/generator-tinymce-plugin/badge.svg?branch=master)](https://coveralls.io/github/panhezeng/generator-tinymce-plugin?branch=master)[![Build Status](https://travis-ci.org/panhezeng/generator-tinymce-plugin.svg?branch=master)](https://travis-ci.org/panhezeng/generator-tinymce-plugin)[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)

[![NPM](https://nodei.co/npm/@panhezeng/generator-tinymce-plugin.png?compact=true)](https://nodei.co/npm/@panhezeng/generator-tinymce-plugin/)

> tinymce plugin scaffolding

## Installation

First, install [Yeoman](https://yeoman.io) and generator-tinymce-plugin using [npm](https://www.npmjs.com/) (we assume you have pre-installed [node.js](https://nodejs.org/)).

### From GitHub

To install a pre-release version:

```bash
npm i -g yo
npm i -g git://github.com/panhezeng/generator-tinymce-plugin.git
```

### Official release

To install a version published to npm:

```bash
npm i -g yo
npm i -g @panhezeng/generator-tinymce-plugin
```

### From Source

Alternatively, if you have cloned this repo from GitHub. You can symlink your local clone into your global node environment. This is particularly useful during development. From inside the folder with the cloned repo:

```bash
npm install -g yo
npm i
npm link
```

## Using the Generator

Then generate your new project: Create a new project folder and navigate to it in you CLI.

```bash
mkdir myApp
cd myApp
```

Then run the generator. If you installed from source or GitHub,

```bash
yo tinymce-plugin
```

or if you installed from npm:

```
yo @panhezeng/tinymce-plugin
```

## Development

- [Creating a yeoman generator](https://yeoman.io/authoring/)
- [prompt question descriptor objects](https://github.com/SBoudrias/Inquirer.js/#question)
- [child_process_child_process_spawn_command_args_options](https://nodejs.org/api/child_process.html#child_process_child_process_spawn_command_args_options)
- [shelljs cheatsheet](https://devhints.io/shelljs)
- [semantic-release-cli setup](https://semantic-release.gitbook.io/semantic-release/usage/getting-started)

### test

`npm link`比`npm run test`更好