微服务前端怎么用微服务,连接前端vue项目和后端

1、先看最终的实现效果，主项目上的导航栏中的子项目菜单下的所有导航界面，均属于副项目的界面

2、首先我们先新建两个vue项目，例如一个是parent，另一个是child

3、主项目输入命令

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

4、副项目输入命令(记住6070端口是可以自己定义的，后面需要用到这个端口号)

vue add vue-cli-plugin-qiankun --type slave --port 6070

5、父项目中，我们新建一个child界面，并且将此界面的路由设置为动态路由，如下：

6、设置父项目的child界面

<template> <div class='child'> <div id="appContainer"></div> </div></template><script>import { registerMicroApps, runAfterFirstMounted, setDefaultMountApp, start } from 'qiankun'export default { name: 'master', data () { return { apps: [ { name: 'child', entry: process.env.NODE_ENV === 'production' ? '/child/index.html':'//localhost:6070', container: '#appContainer', activeRule: '/child'} ],//name:表示副项目的名称,entry:表示副项目的开发环境路径或生产环境路径，container：副项目的容器节点，activeRule：激活规则 } }, created () { if (!window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__) { this.initQiankun(); } else { location.reload(); } }, methods: { initQiankun () { registerMicroApps(this.apps,{//导出对应的生命周期 beforeLoad: [ app => { //console.log('before load', app) } ], beforeMount: [ app => { //console.log('before mount', app) } ], afterUnmount: [ app => { //console.log('after unload', app) } ] }) setDefaultMountApp("/child");//设置主应用启动后默认进入的微应用。 runAfterFirstMounted(() => { //console.info('first app mounted') }); start({ prefetch: true });//开始启动 } }}</script><style scoped></style>

7、更改主项目的vue容器节点id，可根据自身情况修改，位置为别是index.html与app.vue

8、设置app.vue的菜单路由，如下，动态路由后的1,2,3对应副项目的路由，后面会讲，暂且主项目设置完成

9、副项目的main.js设置

import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);Vue.config.productionTip = falselet instance = nullfunction render () { instance = new Vue({ router, store, render: function (h) { return h(App) }}).$mount('#app') } if (!window.__POWERED_BY_QIANKUN__) { render() } export async function bootstrap () { // eslint-disable-next-line no-console //console.log('vue app bootstraped') } export async function mount (props) { // eslint-disable-next-line no-console //console.log('props from main framework', props) render() } export async function unmount () { instance.$destroy() instance = null }

10、副项目app.vue

<template> <div id="app"> <router-view></router-view> </div></template><style lang="scss"></style>

11、新建副项目三个界面及设置对应的路由，注意这里的1,2,3既是对应第八步的设置

import Vue from 'vue'import VueRouter from 'vue-router'import index from '../views/index.vue'import index2 from '../views/index2.vue'import index3 from '../views/index3.vue'Vue.use(VueRouter)const routes = [{ path: '/1', name: 'index', component: index},{ path: '/2', name: 'index2', component: index2},{ path: '/3', name: 'index3', component: index3}]const router = new VueRouter({ mode: 'history', base: window.__POWERED_BY_QIANKUN__ ? '/child' : '/', routes})export default router

12、分别启动两个项目，至此我们即可实现前端微应用

13、如需扩展更多用法，可自行查阅文档学习

1、https://github.com/F-loat/vue-cli-plugin-qiankun

2、https://qiankun.umijs.org/zh