基础环境
实践日期:2023-03-23
Vue CLI: 5.0.8
Node: 18.15.0
Package Manager: npm 9.5.0
OS: Windows 10 x64
设置npm镜像源
npm config set registry https://registry.npmmirror.com/
主应用
创建项目,命名为main
vue create main
选项如下:
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: TS, Router
以下均为默认选项
? Choose a version of Vue.js that you want to start the project with 3.x
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? No
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
安装qiankun,实践版本:qiankun@2.10.3
cd main
npm i qiankun -S
安装element-plus,实践版本:element-plus@2.3.1
npm i element-plus -S
创建空视图组件:src/views/EmptyView.vue
<template>
<div id="container"></div>
</template>
<style>
#container,
#container>div {
height: 100%;
}
</style>
设置路由:src/router/index.ts
import EmptyView from '../views/EmptyView.vue'
{
path: '/',
name: 'home',
component: HomeView
}, // 以下是新增内容
{
path: '/micro1/:chapters*',
name: 'micro1',
component: EmptyView
},
完整引入ElementPlus、注册微应用并启动:src/main.ts
import { createApp } from 'vue'
import { registerMicroApps, start } from 'qiankun'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'
createApp(App).use(router).use(ElementPlus).mount('#app')
registerMicroApps([
{
name: 'micro1',
entry: 'http://localhost:8081/micro1/',
container: '#container',
activeRule: '/micro1',
},
]);
start();
设置布局、菜单、路由:src/App.vue
<template>
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside>
<el-scrollbar>
<el-menu default-active="/" router>
<el-menu-item index="/">Home</el-menu-item>
<el-menu-item index="/about">About</el-menu-item>
<el-menu-item index="/micro1">Micro1 Home</el-menu-item>
<el-menu-item index="/micro1/about">Micro1 About</el-menu-item>
</el-menu>
</el-scrollbar>
</el-aside>
<el-container>
<el-main><router-view /></el-main>
<el-footer>Footer</el-footer>
</el-container>
</el-container>
</el-container>
</template>
<style>
body {
margin: 0;
overflow: hidden;
}
.el-header {
background-color: var(--el-color-primary);
color: var(--el-color-white);
height: 60px;
line-height: 60px;
}
.el-footer {
border-top: solid 1px var(--el-border-color);
height: 60px;
line-height: 60px;
}
.el-menu {
height: calc(100vh - 60px);
}
.el-main {
height: calc(100vh - 120px);
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
</style>
设置页头、滚动条:src/views/HomeView.vue
<template>
<el-page-header>
<template #breadcrumb>
<el-breadcrumb>
<el-breadcrumb-item>Element Plus</el-breadcrumb-item>
<el-breadcrumb-item>Home</el-breadcrumb-item>
</el-breadcrumb>
</template>
<template #content>
<span> Home </span>
</template>
<template #extra>
<el-button>Print</el-button>
<el-button type="primary">Edit</el-button>
</template>
</el-page-header>
<el-divider />
<el-scrollbar style="height: calc(100% - 112px);">
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
</div>
</el-scrollbar>
</template>
<script lang="ts">
设置页头、滚动条:src/views/AboutView.vue
<template>
<el-page-header>
<template #breadcrumb>
<el-breadcrumb>
<el-breadcrumb-item>Element Plus</el-breadcrumb-item>
<el-breadcrumb-item>About</el-breadcrumb-item>
</el-breadcrumb>
</template>
<template #content>
<span> About </span>
</template>
<template #extra>
<el-button>Print</el-button>
<el-button type="primary">Edit</el-button>
</template>
</el-page-header>
<el-divider />
<el-scrollbar style="height: calc(100% - 112px);">
<div class="about">
<h1>This is an about page</h1>
</div>
</el-scrollbar>
</template>
启动应用
npm run serve
微应用
创建项目,命名为micro1
vue create micro1
选项如下:
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: TS, Router
以下均为默认选项
? Choose a version of Vue.js that you want to start the project with 3.x
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? No
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
安装element-plus,实践版本:element-plus@2.3.1
cd micro1
npm i element-plus -S
创建全局CLI配置:vue.config.js
const { defineConfig } = require('@vue/cli-service')
const { name } = require('./package');
module.exports = defineConfig({
configureWebpack: {
output: {
chunkLoadingGlobal: `webpackChunk${name}`,
library: `${name}-[name]`,
libraryTarget: 'umd',
},
},
devServer: {
headers: {
'Access-Control-Allow-Origin': '*',
},
},
publicPath: '/micro1/',
})
设置端口:package.json
"serve": "vue-cli-service serve --port 8081",
修改挂载容器标识:public/index.html
<div id="app"></div> <!-- "app"改为"micro1-app" -->
修改挂载容器样式选择器及样式:src/App.vue
<style>
#app { /* #app改为#micro1-app */
height: 100%; /* 添加该行 */
设置路由:src/router/index.ts
import AboutView from '../views/AboutView.vue'
// component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue') // 删除或注释掉该行
component: AboutView, // 新增该行
export default router
export { routes } // 新增该行
完整引入ElementPlus、导出相应的生命周期钩子:src/main.ts
import { App, createApp } from 'vue'
import { createRouter, createWebHistory, Router, RouterHistory } from 'vue-router'
import { routes } from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import root from './App.vue'
let router: Router | null;
let instance: App<Element> | null;
let history: RouterHistory;
function render(props: { container: Element }) {
history = createWebHistory('/micro1/');
router = createRouter({ history, routes });
instance = createApp(root).use(router).use(ElementPlus);
instance.mount(props.container.querySelector('#micro1-app')!);
}
export async function bootstrap() {
}
export async function mount(props: { container: Element }) {
render(props);
}
export async function unmount() {
instance!.unmount();
instance!._container!.innerHTML = '';
instance = null;
router = null;
history.destroy();
}
设置导航:src/App.vue
<template>
<!-- 删除或注释掉导航
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
-->
<router-view/>
</template>
设置页头、滚动条:src/views/HomeView.vue
<template>
<el-page-header>
<template #breadcrumb>
<el-breadcrumb>
<el-breadcrumb-item>Element Plus</el-breadcrumb-item>
<el-breadcrumb-item>Micro1</el-breadcrumb-item>
<el-breadcrumb-item>Home</el-breadcrumb-item>
</el-breadcrumb>
</template>
<template #content>
<span> Micro1 Home </span>
</template>
<template #extra>
<el-button>Print</el-button>
<el-button type="primary">Edit</el-button>
</template>
</el-page-header>
<el-divider />
<el-scrollbar style="height: calc(100% - 112px);">
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
</div>
</el-scrollbar>
</template>
<script lang="ts">
设置页头、滚动条:src/views/AboutView.vue
<template>
<el-page-header>
<template #breadcrumb>
<el-breadcrumb>
<el-breadcrumb-item>Element Plus</el-breadcrumb-item>
<el-breadcrumb-item>Micro1</el-breadcrumb-item>
<el-breadcrumb-item>About</el-breadcrumb-item>
</el-breadcrumb>
</template>
<template #content>
<span> Micro1 About </span>
</template>
<template #extra>
<el-button>Print</el-button>
<el-button type="primary">Edit</el-button>
</template>
</el-page-header>
<el-divider />
<el-scrollbar style="height: calc(100% - 112px);">
<div class="about">
<h1>This is an about page</h1>
</div>
</el-scrollbar>
</template>
启动应用
npm run serve
访问
About:http://localhost:8080/about
Micro1 Home:http://localhost:8080/micro1/
Micro1 About:http://localhost:8080/micro1/about
相关
基于qiankun搭建vue3 webpack ts微前端项目入门实践_TodayCoding的博客-CSDN博客
基于qiankun搭建vue3 webpack ts无懒加载微前端项目入门实践_TodayCoding的博客-CSDN博客
基于qiankun搭建angular15微前端项目入门实践_TodayCoding的博客-CSDN博客
基于qiankun搭建angular15 hash URL微前端项目入门实践_TodayCoding的博客-CSDN博客
基于qiankun搭建ng-alain15微前端项目入门实践_TodayCoding的博客-CSDN博客