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({//生成压缩包gzverbose: 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 Configurationconst routes: Array<RouteRecordRaw> = [];const router = createRouter({history: createWebHashHistory(),routes,
});router.beforeEach(() => {NProgress.start(); // start progress barreturn 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'),},],},

vue3+ Micro App (一)相关推荐

vue，vue3仿app输入手机验证码功能
vue3 仿app验证码输入功能: 1,每一个输入框只能输入一个数字,也只能输入数字. 2,输入了一个数字之后,自动跳到下一个输入框,当最后那个输入框输入时开始调用接口(或调用某一函数) 3,光标在的 ...
Vue3 + TS（一）- 邂逅Vue
一.认识Vue.js Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架. 1.1 Vue 的安装安装方式: CDN引入: 下载Vue的js文件,并手动引入: 通过 ...
vue3 注册全局方法定义全局方法
1.定义工具类 // 格式化时间 function FormatDate (time: string) {if (Tool.isNotEmpty(time)) {const date = new Da ...
vue3学习全部笔记
1. vue3介绍 Vue.js 3.0版在2020年9月18日发布 Vue3支持vue2的大多数特性 Vue3在2022年2月7日成为新的默认版本性能提升项目打包体积更小初次渲染更快, 更新渲 ...
uniapp vue3版本引用color-ui的cu-custom组件问题
这里写自定义目录标题 uniapp,vue3版本使用color-ui 引入color-ui 1.解压下载,将colorui文件导入项目根目录 2.main.js 引入cu-custom组件全局使用 3 ...
微前端之实现方式和项目分析、实践主子应用启动配置、vue2、vue3、react15、react16 子应用的配置
一.微前端之实现方式和项目分析微前端实现方式对比,如下所示: Iframe,Iframe 的优势是技术成熟,支持页面嵌入,天然支持运行沙箱隔离.独立运行.Iframe 的劣势是页面之间可以是不同的域 ...
Vue3+Ts(coderwhy)超详细学习笔记（二）邂逅Vue3开发
本文修改记录 22/1/11 发布 22/3/20 新增与Vue2与Vue3对比备注一. 认识Vue.js 1.1. 认识Vue Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户 ...
vue3.2、vue3和vue2不同之处
缩写记忆: tv code2&tf spa tv code2: 其中d是0.object.defineproperty=> proxy 1.diff算法优化(添加标记,增量diff).2 ...
论vue3.0和vue2.0区别之编程方式及例子详解
系列文章目录第一章论vue3.0和vue2.0区别之编程方式及例子详解第二章同一台电脑实现 vue-cli2和vue-cli3同时并存及常见命令第三章 vue3.0项目实战 - Ele ...

vue3+ Micro App (一)

vue3+ Micro App (一)相关推荐

最新文章

热门文章