https://github.com/f-loat/vue-cli-plugin-qiankun

🚀 qiankun plugin for vue-cli
https://github.com/f-loat/vue-cli-plugin-qiankun

micro-frontends plugin qiankun single-spa vue-cli

Last synced: 3 days ago
JSON representation

🚀 qiankun plugin for vue-cli

• Host: GitHub
• URL: https://github.com/f-loat/vue-cli-plugin-qiankun
• Owner: F-loat
• License: mit
• Created: 2020-01-10T09:19:50.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2020-06-04T11:07:54.000Z (over 4 years ago)
• Last Synced: 2025-02-10T00:14:19.703Z (11 days ago)
• Topics: micro-frontends, plugin, qiankun, single-spa, vue-cli
• Language: JavaScript
• Homepage: https://f-loat.github.io/vue-cli-plugin-qiankun
• Size: 654 KB
• Stars: 168
• Watchers: 8
• Forks: 26
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
## vue-cli-plugin-qiankun

> qiankun plugin for vue-cli

[![npm version](https://img.shields.io/npm/v/vue-cli-plugin-qiankun.svg?style=flat-square)](https://www.npmjs.com/package/vue-cli-plugin-qiankun) [![npm downloads](https://img.shields.io/npm/dt/vue-cli-plugin-qiankun.svg?style=flat-square)](https://www.npmjs.com/package/vue-cli-plugin-qiankun)

### 使用步骤 (Use setup)

1. 创建主应用 (Create master project)

``` sh

$ vue create master

$ cd master

$ vue add vue-cli-plugin-qiankun --type master

```

2. 创建子应用 (Create slave project)

``` sh

$ vue create foo-app

$ cd foo-app

$ vue add vue-cli-plugin-qiankun --type slave --port 8081

```

3. 配置主应用 (Config master project)

> master/src/App.vue

``` vue

export default {

  name: 'master',

  data () {

    return {

      // ...

      apps: [

        { name: 'foo-app', entry: '//localhost:8081', container: '#appContainer', activeRule: '/foo-app' }

      ]

    }

  },

  // ...

  methods: {

    // ...

    initQiankun () {

      // ...

      setDefaultMountApp('/foo-app')

      // ...

    }

  }

}

```

4. 运行各项目 (Run each project)

``` sh

$ cd master

$ yarn serve

```

``` sh

$ cd foo-app

$ yarn serve

```

### 示例 (Examples)

> [DEMO](https://f-loat.github.io/vue-cli-plugin-qiankun)

``` sh

$ cd examples

$ yarn

$ yarn install:all

$ yarn serve:all

```

### 功能 (Features)

- 修改项目文件引入 qiankun 框架

- 注入 qiankun 框架要求的构建配置

- 自动配置 `publicPath` 处理资源路径

### 致谢 (Acknowledgements)

- [vue-cli](https://github.com/vuejs/vue-cli) Standard Tooling for Vue.js Development.

- [qiankun](https://github.com/umijs/qiankun) Blazing fast, simple and completed solution for micro frontends.

- [single-spa](https://github.com/CanopyTax/single-spa) What an awesome meta-framework for micro-frontends!