vue?+?qiankun?項目搭建過程

更新時間：2023年03月03日 10:58:58 作者：小蒜瓣

這篇文章主要介紹了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都需要驗證

單獨的配置文件

不保存這個配置

項目創(chuàng)建成功

自己喜歡的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，統(tǒng)一處理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便于區(qū)分

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改造，創(chuàng)造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中創(chuàng)建vue實例的代碼提到render函數(shù)里，并接收一個參數(shù)，

router實例也放入render函數(shù),修改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函數(shù)中調用render方法進行子應用渲染。unmount函數(shù)中將render方法中創(chuàng)建的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 項目搭建內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Vue qiankun微前端實現(xiàn)詳解

vue
qiankun

vue-cli2.x舊版本卸載不掉的問題踩坑指南(附Vue腳手架安裝教程)
遇到一個Vuecli2腳手架卸載不了的問題,查了許多資料說的都比較復雜,所以下面這篇文章主要給大家介紹了關于vue-cli2.x舊版本卸載不掉的問題踩坑的相關資料,文中還附了Vue腳手架安裝教程,需要的朋友可以參考下
2022-07-07
解決vue中使用swiper插件問題及swiper在vue中的用法
Swiper是純javascript打造的滑動特效插件，面向手機、平板電腦等移動終端。這篇文章主要介紹了解決vue中使用swiper插件及swiper在vue中的用法,需要的朋友可以參考下
2018-04-04
vue-router路由傳參及隱藏參數(shù)問題
這篇文章主要介紹了vue-router路由傳參及隱藏參數(shù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-12-12
分享幾個可以助你提高效率的Vue指令
vue是一款漸進式JavaScript框架,漸進式是指由淺到深,由簡單到復雜的使用vue框架,下面這篇文章主要給大家分享介紹了幾個可以助你提高效率的Vue指令,需要的朋友可以參考下
2022-05-05
vue 實現(xiàn)左右拖拽元素并且不超過他的父元素的寬度
這篇文章主要介紹了vue 實現(xiàn)左右拖拽元素并且不超過他的父元素的寬度,需要的朋友可以參考下
2018-11-11
vue自定義橫向滾動條css導航兩行排列布局實現(xiàn)示例
這篇文章主要為大家介紹了vue自定義橫向滾動條css導航兩行排列布局實現(xiàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-08-08
Element Popover 彈出框的使用示例
這篇文章主要介紹了Element Popover 彈出框的使用示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-07-07
IOS上微信小程序密碼框光標離開提示存儲密碼的完美解決方案
ios密碼框輸入密碼光標離開之后會提示存儲密碼的彈窗,關于這樣的問題怎么解決呢,下面給大家分享IOS上微信小程序密碼框光標離開提示存儲密碼的完美解決方案,感興趣的朋友一起看看吧
2024-07-07
Vue項目中定義全局變量的幾種常用方法總結
在項目中經常有些函數(shù)和變量是需要復用,比如說網(wǎng)站服務器地址,從后臺拿到的用戶的登錄token,用戶的地址信息等,這時候就需要設置一波全局變量,這篇文章主要給大家介紹了關于Vue項目中定義全局變量的幾種常用方法的相關資料,需要的朋友可以參考下
2023-12-12
簡單實現(xiàn)Vue的observer和watcher
這篇文章主要教大家如何簡單實現(xiàn)Vue的observer和watcher，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-12-12