微前端 qiankun + vue 从 0 到 1

一、创建项目

1、新建一个文件夹（demo）

2、创建主项目（master）

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

3、创建子项目（foo-app）--- 跟主项目在同一级

$ vue create foo-app
$ cd foo-app
$ vue add vue-cli-plugin-qiankun --type slave --port 8081

4、查看配置主应用是否有错

master/src/App.vue

<script>
export default {
  name: 'master',
  data () {
    return {
      // ...
      apps: [
        { name: 'foo-app', entry: '//localhost:8081', container: '#appContainer', activeRule: '/foo-app' }
      ]
    }
  },
  // ...
  methods: {
    // ...
    initQiankun () {
      // ...
      setDefaultMountApp('/foo-app')
      // ...
    }
  }
}
</script>

5、运行各项目

$ cd foo-app
$ yarn serve

image.png

$ cd master
$ yarn serve

image.png

至此，qiankun + vue 项目简易框架已搭建完成。