首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue qiankun 项目搭建

vue + qiankun 项目搭建过程

2023-03-03 10:34:10 作者：小蒜瓣

这篇文章主要介绍了vue + qiankun 项目搭建,首先是通过cli3构建vue2项目，通过qiankun改造主应用，本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

一、cli3构建vue2项目

1、前期工作：查看cli安装情况与安装

npm install -g @vue/cli

已安装情况查看：vue -V(大写的V)

2、新建项目

vue create main-project

3、选择自定义配置

配置选择

选择vue版本、babel、router、vuex、css预处理器、lint格式校验

选择vue 2.x

qiankun 子应用建议使用 history路由模式

选择自己喜欢的css预处理器

选择eslint标准配置

提交保存eslint都需要验证

单独的配置文件

不保存这个配置

项目创建成功

自己喜欢的eslint配置eslintrc.js

module.exports = {
    root: true,
    env: {
            node: true
    },
    extends: [
        'plugin:vue/essential',
        '@vue/standard'
    ],
    parserOptions: {
        parser: 'babel-eslint'
    },
    rules: {
        'semi': 'off',
        'quotes': 'off',
        'indent': ["error", 4],
        "space-before-function-paren": "off",
        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
    }
}

4、进入项目文件夹内 cd frame安装插件

安装依赖的插件 element ui、 axios

安装element ui:

npm i element-ui -S

安装完成后修改main.js

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
import router from './router'
import store from './store'
 
Vue.use(ElementUI)
 
Vue.config.productionTip = false
 
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

安装axios:

npm install axios

新建了个文件夹api index.js 引用axios，统一处理api与使用qiankun与此无关

import Axios from 'axios'

到此只是建项目，两个项目一个main-project 和sub-project

主应用 main-project：

子应用 sub-project：

二、qiankun改造主应用

1、主应用安装qiankun

npm install qiankun --save

2、给菜单增加一个router-link，to值为"/subProject"，并且在router-view的下面增加一个id为VueContainer的盒子，用于承载子应用。

3、新增一个qiankun文件夹里面加个index.js。导入qiankun中的registerMicroApps和star两个方法，注册子应用并启动qiankun

import { registerMicroApps, start } from "qiankun";
 
export const useQiankun = () => {
    const apps = [
        {
            name: "sub-project",
            entry: "http://localhost:8091", // 主应用端口用8090，子应用8091
            container: "#VueContainer",
            activeRule: "/subProject", // 与route-link to的相同
            props: {
                msg: "这是父应用传过来的值，传递给子应用sub-project"
            }
        }
    ]
 
    registerMicroApps(apps, {
        beforeLoad: [
            (app) => {
                console.log(`${app.name}的beforeLoad`);
            }
        ],
        beforeMount: [
            (app) => {
                console.log(`${app.name}的beforeMount`);
            }
        ],
        afterMount: [
            (app) => {
                console.log(`${app.name}的afterMount`);
            }
        ],
        beforeUnmount: [
            (app) => {
                console.log(`${app.name}的beforeUnmount`);
            }
        ],
        afterUnmount: [
            (app) => {
                console.log(`${app.name}的afterUnmount`);
            }
        ]
    });
 
    start({ experimentalStyleIsolation: true, prefetch: "all" });
};

4、在main.js里导入 qiankun/index, 注册子应用并启动

import { useQiankun } from './qiankun/index'    
 
vueApp.$nextTick(() => {
    useQiankun()
})

三、qiankun改造子应用

1、主应用安装qiankun

npm install qiankun --save

2、先修改一下vue实例挂载的id，#app改为subApp便于区分

3、在src中增加一个文件夹qiankun，public-path.js，判断window.__ POWERED_BY_QIANKUN __，如果是从qiankun启动则将window. __ INJECTED_PUBLIC_PATH_BY_QIANKUN __ 的值赋值给 __ webpack_public_path __

if (window.__POWERED_BY_QIANKUN__) {
  // eslint-disable-next-line camelcase, no-undef
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}

4、router/index.js改造，创造vue实例移入main.js

5、main.js 导入VueRouter、routes、 public-path移除原来的router

import "./public-path";
import VueRouter from "vue-router";
import routes from "./router";

6、main.js中创建vue实例的代码提到render函数里，并接收一个参数，

router实例也放入render函数,修改router/index.js，process.env.BASE_URL,指定base值为：“/subProject”

判断public-path的window.__POWERED_BY_QIANKUN__如果不是从qiankun启动，直接调用render表示独立运行

let instance
let router
function render(props = {}) {
    const { container } = props;
    router = new VueRouter({
        mode: "history",
        base: "/subProject",
        routes
    });
    instance = new Vue({
        router,
        store,
        render: (h) => h(App)
    }).$mount(container ? container.querySelector("#subApp") : "#subApp");
}
// 如果不是从qiankun启动，直接调用render表示独立运行
if (!window.__POWERED_BY_QIANKUN__) {
    render();
}

5、main.js 导出3个必需的方法bootstrap，mount和unmount；mount函数中调用render方法进行子应用渲染。unmount函数中将render方法中创建的vue实例销毁。

export async function bootstrap() {
    console.log("[vue] vue bapp bootstraped");
}
export async function mount(props) {
    console.log("[vue] props from main framework", props);
    render(props);
}
export async function unmount() {
    instance.$destroy();
    instance.$el.innerHTML = "";
    instance = null;
    router = null;
}

整体的main.js

import "./qiankun/public-path";
import Vue from "vue";
import VueRouter from "vue-router";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import "./assets/main.css";
import App from "./App.vue";
import routes from "./router";
import store from "./store";
 
Vue.use(ElementUI);
 
Vue.config.productionTip = false;
 
let instance
let router
function render(props = {}) {
    const { container } = props;
    router = new VueRouter({
        mode: "history",
        base: "/subProject",
        routes
    });
    instance = new Vue({
        router,
        store,
        render: (h) => h(App)
    }).$mount(container ? container.querySelector("#subApp") : "#subApp");
}
// 如果不是从qiankun启动，直接调用render表示独立运行
if (!window.__POWERED_BY_QIANKUN__) {
    render();
}
 
export async function bootstrap() {
    console.log("[vue] vue bapp bootstraped");
}
export async function mount(props) {
    console.log("[vue] props from main framework", props);
    render(props);
}
export async function unmount() {
    instance.$destroy();
    instance.$el.innerHTML = "";
    instance = null;
    router = null;
}

5、增加vue.config.js，

配置允许跨域：“ Access-Control-Allow-Origin：’*’ ”，并配置webpack的output.library和output.libraryTarget

const { name } = require('./package');
module.exports = {
    productionSourceMap: false,
    lintOnSave: process.env.NODE_ENV === 'development',
    devServer: {
        proxy: {
            "/cmp": {
                target: "https://11.11.9.206:8080",
                ws: true,
                changeOrigin: true,
                secure: false
                // pathRewrite: { "^/cmp/api": "" }
            }
        },
        headers: {
            'Access-Control-Allow-Origin': '*'
        }
    },
    configureWebpack: {
        name: name,
        output: {
            library: `${name}-[name]`,
            libraryTarget: 'umd', // 把微应用打包成 umd 库格式
            jsonpFunction: `webpackJsonp_${name}`
        }
    }
};

6、最终样子

到此这篇关于vue + qiankun 项目搭建的文章就介绍到这了,更多相关vue qiankun 项目搭建内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue qiankun微前端实现详解