在本节中，我们将深入探讨一个使用Vue3、TypeScript、Vite、Pinia、ElementPlus技术栈的实战案例。此案例将是一个模拟电商平台，由多个微前端子应用组成，例如：产品列表、产品详情、购物车、用户登录和注册等。
准备工作
-
环境搭建：
-
确保已安装Node.js和npm。使用Vite创建Vue3+TypeScript项目：
npm create vite@latest my-ecommerce-platform -- --template vue-ts cd my-ecommerce-platform npm install
-
安装ElementPlus和Pinia：
npm install element-plus pinia
创建主应用
-
初始化和配置主应用：
-
在主应用中使用
vue-router进行路由管理，设置子应用的激活规则：// main.ts import { createApp } from 'vue'; import { createPinia } from 'pinia'; import App from './App.vue'; import router from './router';
const app = createApp(App);
app.use(createPinia()); app.use(router);
app.mount('#app');
-
接着，配置
vue-router：// src/router/index.ts import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: '/', name: 'home', component: () => import('../views/HomeView.vue'), }, // 添加更多路由... ], });
export default router;
-
ElementPlus组件库：
-
在
main.ts里全局引用ElementPlus组件库，以便在子应用中统一使用UI组件。import ElementPlus from 'element-plus'; import 'element-plus/dist/index.css';
app.use(ElementPlus);
创建子应用
每个子应用也是一个Vite+Vue3项目，可以通过Vite的插件或手动编写脚本实现资源的导入和导出，以及生命周期的挂载。
-
子应用配置：
-
子应用的
main.ts修改为支持作为微前端子应用启动：import { createApp } from 'vue'; import App from './App.vue'; import { createPinia } from 'pinia';
function setupApp() { const app = createApp(App); app.use(createPinia()); app.mount('#app'); }
// 独立运行 if (!window.POWERED_BY_QIANKUN) { setupApp(); }
// 微前端环境下，导出生命周期钩子 export async function bootstrap() {} export async function mount(props: any) { setupApp(); } export async function unmount() {}
-
在主应用中加载子应用：
-
主应用需要使用qiankun的API来注册子应用。
npm install qiankun
-
然后在主应用中设置子应用：
// main.ts 或者合适的地方注册子应用 import { registerMicroApps, start } from 'qiankun';
registerMicroApps([ { name: 'productApp', entry: '//localhost:7101', container: '#subapp-container', activeRule: '/product', }, // 注册更多子应用... ]);
start();
子应用之间通信
-
状态管理：
-
使用Pinia进行状态管理，子应用可以导入主应用的Pinia store进行状态共享：
-
主应用store：
// src/stores/mainStore.ts import { defineStore } from 'pinia';
export const useMainStore = defineStore('main', { state: () => ({ user: null }), actions: { setUser(user: any) { this.user = user; } } });
-
子应用使用：
import { useMainStore } from 'path/to/mainApp/src/store/mainStore';
const mainStore = useMainStore(); console.log(mainStore.user);
-
Element UI组件使用：
-
在子应用中，可以按需引入主应用中全局注册的ElementPlus组件。
性能优化
-
懒加载：
-
Vue Router支持路由级别的懒加载，可以为每个子应用路由配置懒加载。
-
预加载：
-
Vite支持预加载设置，也可以手动配置webpack来优化资源的加载。
安全性
在微前端应用中，需要关注跨域资源共享（CORS）策略，确保安全通信。配置Nginx或者相应的Web服务器支持所需的CORS策略。
部署子应用
使用Vite的build命令将应用构建为静态资源，然后可以将子应用部署到相应的静态资源服务器或者使用Docker容器化部署。
通过本节的实战案例演示，我们探索了如何使用Vue3、TypeScript、Vite、Pinia和ElementPlus构建一个基于微前端架构的电商平台。我们了解了如何设置主应用和子应用、实现子应用间的通信和状态共享，以及应用的性能优化和部署。希望这个案例能够帮助你深入理解和掌握微前端架构下的应用开发和管理。
