qiankun框架的使用

1.安裝qiankun

yarn add qiankun 或者 npm i qiankun -s

2.建立應用

.建立主應用 vue create qiankun-base

.建立vue子應用 vue create qiankun-vue

3.進行主應用（qiankun-base專案）的配置

安裝：npm i element-ui qiankun view-design vue-router

src目錄下建立router.js檔案，加入如下** 

import vue from "vue";//

引入vue
import router from "vue-router";//
引入vue-router
import home from './components/helloworld.vue';
vue.use(router);
//使用路由
const router = new router(,//
/路徑對應home元件
],});
export 
default router;//
拋出路由

main.js中

entry：配置是兩個子專案的網域名稱和埠，必須確保兩字子專案執行在這兩個埠上面

activerule就是我們的啟用路徑，根據路徑來顯示不同的子應用

相關路由配置

import elementui from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

import viewui from 'view-design';

import 'view-design/dist/styles/iview.css';

vue.use(elementui);

vue.use(viewui);

//初始化 state

let state =

const actions =initglobalstate(state);

//主專案專案監聽和修改

actions.onglobalstatechange((state, prev) =>);

actions.setglobalstate();

}, ]

//註冊應用

start();//

開啟new

vue(

}} }

}4.配置qiankun-vue 子專案

安裝：npm i vue-router

main.js檔案中加入以下**;

//掛載例項

function

render()

//判斷當前執行環境是獨立執行的還是在父應用裡面進行執行，配置全域性的公共資源路徑

if(window.__powered_by_qiankun__)

//如果是獨立執行window.__powered_by_qiankun__=undefined

if(!window.__powered_by_qiankun__)

//最後暴露的三個方法是固定的，載入渲染以及銷毀

export async function

bootstrap(){}

export async

function

mount(props)

export async

function

unmount()

src目錄下建立router.js檔案加入以下**

import vue from 'vue'import vuerouter from 'vue-router'import home from './components/helloworld.vue'vue.use(vuerouter)

const routes =[  ]
const router = new
vuerouter()
export 
default router

跟目錄下建立vue.config.js檔案加入以下**

module.exports =

},configurewebpack:
}}

5.配置qiankun-react子專案

src目錄下index.js檔案加入如下**：

import react from 'react';

import reactdom from 'react-dom';
import './index.css';
function
render()
if(!window.__powered_by_qiankun__)
export async 
function
bootstrap()
export async 
function
mount() 
export async 
function
unmount()

根目錄下建立config-overrides檔案並加入以下**：

module.exports =,

devserver:(configfunction)=>
return
config}}
}

import react from 'react';

import logo from './logo.svg';
import  from 'react-router-dom'
function
return
(    
首頁關於頁面
(        
and s**e to reload.
>learn react
)}>
}>);}
//qiankun 無關的技術棧
export 
修改package.json（
"scripts": {

Struts Tiles框架的使用

tiles 框架增強了基於元件的設計和 web ui 設計中的模板概念。它可以幫助開發人員解除 web ui 元件之間的耦合並重用它們。另外，tiles 模板及其繼承特徵使您能夠以最小量的工作為 web 應用程式設計出一致的外觀。下面以乙個小例子來說明tiles框架的使用 在web.xml檔案內引入...

MyMVC框架的使用

1 在web.config 中system.web 節點下新增如下 2 為了相容iis7.0 在節點下新增如下 上邊的是配置 例如在ajaxmenumanager.cs中有如下方法 using system using system.collections.generic using system....

Volley框架的使用

volley請求框架真的很簡單，分幾步就可以搞定了。2 使用requestmanager。乙個網路post請求方法 1 post url 網路請求url 2 post json 網路請求json引數。loadcontroler mloadcontroler requestmanager.getins...