Vue CLI 插件 Qiankun 使用教程

Vue CLI 插件 Qiankun 使用教程

vue-cli-plugin-qiankun项目地址:https://gitcode.com/gh_mirrors/vu/vue-cli-plugin-qiankun

项目目录结构及介绍

Vue CLI 插件 Qiankun 的目录结构如下：

vue-cli-plugin-qiankun/
├── README.md
├── package.json
├── src/
│   ├── App.vue
│   ├── main.js
│   ├── router.js
│   ├── store.js
│   └── views/
├── public/
│   └── index.html
└── vue.config.js

目录结构介绍

• README.md: 项目说明文档。
• package.json: 项目依赖和脚本配置文件。
• src/: 源代码目录。
  • App.vue: 主应用组件。
  • main.js: 项目入口文件。
  • router.js: 路由配置文件。
  • store.js: 状态管理配置文件。
  • views/: 页面组件目录。
• public/: 公共资源目录。
  • index.html: 主 HTML 文件。
• vue.config.js: Vue CLI 配置文件。

项目启动文件介绍

main.js

main.js 是项目的入口文件，负责初始化 Vue 实例和引入 Qiankun 插件。

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import { registerMicroApps, start } from 'qiankun';

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');

registerMicroApps([
  {
    name: 'app1',
    entry: '//localhost:7100',
    container: '#subapp-viewport',
    activeRule: '/app1',
  },
  {
    name: 'app2',
    entry: '//localhost:7101',
    container: '#subapp-viewport',
    activeRule: '/app2',
  },
]);

start();

关键点

• registerMicroApps: 注册微应用。
• start: 启动 Qiankun。

项目配置文件介绍

vue.config.js

vue.config.js 是 Vue CLI 的配置文件，用于配置 Webpack 和其他构建选项。

module.exports = {
  devServer: {
    port: 8080,
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  configureWebpack: {
    output: {
      library: 'vueApp',
      libraryTarget: 'umd',
    },
  },
};

关键点

• devServer: 开发服务器配置。
• configureWebpack: Webpack 配置。
  • output: 输出配置，用于微应用加载。

通过以上配置，可以确保项目在开发和构建过程中正确使用 Qiankun 插件。

vue-cli-plugin-qiankun项目地址:https://gitcode.com/gh_mirrors/vu/vue-cli-plugin-qiankun