关于ant desgin of vue 微前端qiankun项目集成javascript
qiankun 是一个基于 single-spa 的微前端实现库,旨在帮助你们能更简单、无痛的构建一个生产可用微前端架构系统。css
微前端架构具有如下几个核心价值:html
$ git clone https://github.com/umijs/qiankun.git
$ yarn install
$ yarn examples:install
$ yarn examples:start
http://localhost:7099
<ul class="mainapp-sidemenu"> <li onclick="push('/react16')">React16</li> <li onclick="push('/react15')">React15</li> <li onclick="push('/vue')">Vue</li> <li onclick="push('/angular9')">Angular9</li> <li onclick="push('/project')">蚂蚁</li> </ul>
registerMicroApps( [ { name: 'react16', entry: '//localhost:7100', render, activeRule: genActiveRule('/react16'), }, { name: 'react15', entry: '//localhost:7102', render, activeRule: genActiveRule('/react15'), }, { name: 'vue', entry: '//localhost:7101', render, activeRule: genActiveRule('/vue'), }, { name: 'angular9', entry: '//localhost:7103', render, activeRule: genActiveRule('/angular9'), }, { name: 'project', entry: '//localhost:8000', render, activeRule: genActiveRule('/project'), }, ], { beforeLoad: [ app => { console.log('[LifeCycle] before load %c%s', 'color: green;', app.name); }, ], beforeMount: [ app => { console.log('[LifeCycle] before mount %c%s', 'color: green;', app.name); }, ], afterUnmount: [ app => { console.log('[LifeCycle] after unmount %c%s', 'color: green;', app.name); }, ], }, );
if (window.__POWERED_BY_QIANKUN__) { // eslint-disable-next-line no-undef __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__; }
// ie polyfill import './public-path' import '@babel/polyfill' import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store/' import { VueAxios } from './utils/request' // mock import './mock' import bootstraps from './core/bootstrap' import './core/use' // 去掉权限 import './permission' // permission control import './utils/filter' // global filter Vue.config.productionTip = false // mount axios Vue.$http and this.$http Vue.use(VueAxios) let instance = null function render () { // router = new VueRouter({ // base: window.__POWERED_BY_QIANKUN__ ? '/project' : '/', // mode: 'history', // routes // }) instance = new Vue({ router, store, created () { bootstraps() }, render: h => h(App) }).$mount('#app') } // new Vue({ // router, // store, // created () { // bootstrap() // }, // render: h => h(App) // }).$mount('#app') if (!window.__POWERED_BY_QIANKUN__) { render() } export async function bootstrap () { console.log('[vue] vue app bootstraped') } export async function mount (props) { console.log('[vue] props from main framework', props) render() } export async function unmount () { instance.$destroy() instance = null // router = null }
export default new Router({ // mode: 'history', base: window.__POWERED_BY_QIANKUN__ ? '/project' : '/', mode: 'history', scrollBehavior: () => ({ y: 0 }), routes: constantRouterMap.concat(asyncRouterMap) })
const path = require('path') const webpack = require('webpack') const packageName = require('./package.json').name function resolve (dir) { return path.join(__dirname, dir) } // vue.config.js module.exports = { /* Vue-cli3: Crashed when using Webpack `import()` #2463 https://github.com/vuejs/vue-cli/issues/2463 */ /* pages: { index: { entry: 'src/main.js', chunks: ['chunk-vendors', 'chunk-common', 'index'] } }, */ outputDir: 'dist', assetsDir: 'static', filenameHashing: true, configureWebpack: { output: { library: `${packageName}-[name]`, libraryTarget: 'umd', jsonpFunction: `webpackJsonp_${packageName}` }, plugins: [ // Ignore all locale files of moment.js new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/) ] }, chainWebpack: config => { config.resolve.alias .set('@$', resolve('src')) .set('@api', resolve('src/api')) .set('@assets', resolve('src/assets')) .set('@comp', resolve('src/components')) .set('@views', resolve('src/views')) .set('@layout', resolve('src/layout')) .set('@static', resolve('src/static')) const svgRule = config.module.rule('svg') svgRule.uses.clear() svgRule .oneOf('inline') .resourceQuery(/inline/) .use('vue-svg-icon-loader') .loader('vue-svg-icon-loader') .end() .end() .oneOf('external') .use('file-loader') .loader('file-loader') .options({ name: 'assets/[name].[hash:8].[ext]' }) /* svgRule.oneOf('inline') .resourceQuery(/inline/) .use('vue-svg-loader') .loader('vue-svg-loader') .end() .end() .oneOf('external') .use('file-loader') .loader('file-loader') .options({ name: 'assets/[name].[hash:8].[ext]' }) */ }, css: { loaderOptions: { less: { modifyVars: { /* less 变量覆盖,用于自定义 ant design 主题 */ /* 'primary-color': '#F5222D', 'link-color': '#F5222D', 'border-radius-base': '4px', */ }, javascriptEnabled: true } } }, devServer: { // development server port 8000 hot: true, disableHostCheck: true, overlay: { warnings: false, errors: true }, headers: { 'Access-Control-Allow-Origin': '*' }, port: 8000 // proxy: { // '/api': { // // target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro', // target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro', // ws: false, // changeOrigin: true // } // } }, lintOnSave: undefined, // babel-loader no-ignore node_modules/* transpileDependencies: [] }