# vue-cli-plugin-micro-frontend

> vue-cli of qiankun plugin

Latest version **0.0.5** (published 2022-10-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-cli-plugin-micro-frontend
pnpm add vue-cli-plugin-micro-frontend
yarn add vue-cli-plugin-micro-frontend
bun add vue-cli-plugin-micro-frontend
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2022-10-21 |
| First published | 2022-08-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 8.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | YangDengcheng |
| Maintainers | yangdengcheng |
| Keywords | vue-cli, qiankun, micro-frontend |

## Links

- npm: https://www.npmjs.com/package/vue-cli-plugin-micro-frontend
- Repository: https://github.com/yangdengcheng/vue-cli-plugin-micro-frontend
- Homepage: https://github.com/yangdengcheng/vue-cli-plugin-micro-frontend#readme
- Issues: https://github.com/yangdengcheng/vue-cli-plugin-micro-frontend/issues
- npm.io page: https://npm.io/package/vue-cli-plugin-micro-frontend

## Recent versions

- 0.0.5 (latest) — 2022-10-21
- 0.0.4 — 2022-09-26
- 0.0.3 — 2022-08-22
- 0.0.2 — 2022-08-22
- 0.0.1 — 2022-08-02

## README

# vue-cli-plugin-micro-frontend


## 前言

本插件支持vue-cli 3.x，应用创建成功后添加插件，自动注入qiankun2.x并完成配置，方便qiankun微前端框架在主应用、子应用引入。

## 使用步骤

1. 准备主应用

```shell
vue create master-app

cd master-app

vue add vue-cli-plugin-micro-frontend --type master

```

2. 准备子应用

```shell
vue create child-app-1

cd child-app-1

vue add vue-cli-plugin-micro-frontend --type child --port 8301
```

3. 配置主应用

```javascript
<script>
export default {
    name: 'master',
    data() {
        return {
            ...
            apps: [
                /**
                 * name：子应用的应用名
                 * activeRule：'/子应用应用名'
                 */
                { name: 'child-app-1', entry: '//localhost:8301', container: '#appContainer', activeRule: '/child-app-1' }            
            ]   
            ...
        }
    },
    methods: {
        ...
        initQiankun() {
            // 设置默认跳转子应用路由
            setDefaultMountApp('/child-app-1')    
        }  
        ...
    }   
} 
</script>
```

4. 运行主应用与子应用

```shell
cd master-app
npm run serve
```

```shell
cd child-app-1
npm run serve
```

## 示例

```shell
cd examples

npm install

npm run install:all

npm run serve:all

```

---
_Source: https://npm.io/package/vue-cli-plugin-micro-frontend · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._