vue3+ Micro App (一)

今天偶然的机会看到了Micro App，其实Micro App的WebComponent思想比single-spa的思路更加适合项目要求，但公司的项目群目前采用的qiankun，为了验证Micro App的优势，打算采用vue+Micro App来进行项目验证。
第一步创建项目：

 npm create vite@latest xm-control-micro-main

第二步：选择vue
第三步：选择TypeScript

在这里插入图片描述
启动项目：

第四步：安装ant-des

yarn add ant-design-vue

第五步：配置ant，这里采用全局配置的方式

import { App } from 'vue';

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

export function setupAntDesignVue(app: App) {
  app.use(Antd);
}

第六步：配置gzip打包

import viteCompression from 'vite-plugin-compression'
viteCompression({
	//生成压缩包gz
	verbose: true,
	disable: false,
	threshold: 10240,
	algorithm: 'gzip',
	ext: '.gz',
	})

第七步：配置vue-router

yarn add vue-router

修改main.ts

app.use(router);
// 路由准备完毕再挂载
router.isReady().then(() => app.mount('#app'));

定义router/index.ts

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
import NProgress from 'nprogress'; // progress bar
import 'nprogress/css/nprogress.css'; // 进度条样式

NProgress.configure({ showSpinner: false }); // NProgress Configuration

const routes: Array<RouteRecordRaw> = [

];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

router.beforeEach(() => {
  NProgress.start(); // start progress bar
  return true;
});

router.afterEach(() => {
  NProgress.done(); // finish progress bar
});

export default router;

第八步：安装pinia

 yarn add pinia

第九步：添加别名 vite.config.ts

resolve: {
    alias: [
      {
        find: '@',
        replacement: resolve(__dirname, './src'),
      },
      {
        find: '/@',
        replacement: resolve(__dirname, './src'),
      },
    ],
  },

猜你喜欢