Advertisement

vite-plugin-qiankun:保持Vite ES特性,轻松集成乾坤微前端子应用

  •  5星
  •     浏览量: 0
  •     大小:None
  •      文件类型:None


简介:
vite-plugin-qiankun是一款插件,它使在Vite环境中利用ES模块特性的乾坤微前端框架能够无缝集成,并简化了子应用的开发流程。 简介vite-plugin-qiankun:这是一个帮助应用快速接入乾坤的Vite插件,保留了Vite构建ES模块的优势,并提供一键配置功能,不会影响已有的Vite配置。 **快速开始** 1. 在 `vite.config.ts` 文件中安装并使用该插件: ```typescript // vite.config.ts import qiankun from vite-plugin-qiankun; export default { // 这里的 myMicroAppName 是子应用名,主应用注册时的 AppName 需保持一致 plugins: [qiankun(myMicroAppName)], // 生产环境需要指定运行域名作为base base: http://xxx.com/, } ``` 2. 在入口文件中添加乾坤生命周期配置: ```typescript // main.ts import { renderWithQiankun, qiankunWindow } from vite-plugin-qiankun; renderWithQiankun(qiankunWindow.__POWERED_BY_QIANKUN__); ``` 通过以上步骤,可以快速将应用接入乾坤微前端框架。

全部评论 (0)

还没有任何评论哟~
客服
客服
  • vite-plugin-qiankunVite ES
    优质
    vite-plugin-qiankun是一款插件,它使在Vite环境中利用ES模块特性的乾坤微前端框架能够无缝集成,并简化了子应用的开发流程。 简介vite-plugin-qiankun:这是一个帮助应用快速接入乾坤的Vite插件,保留了Vite构建ES模块的优势,并提供一键配置功能,不会影响已有的Vite配置。 **快速开始** 1. 在 `vite.config.ts` 文件中安装并使用该插件: ```typescript // vite.config.ts import qiankun from vite-plugin-qiankun; export default { // 这里的 myMicroAppName 是子应用名,主应用注册时的 AppName 需保持一致 plugins: [qiankun(myMicroAppName)], // 生产环境需要指定运行域名作为base base: http://xxx.com/, } ``` 2. 在入口文件中添加乾坤生命周期配置: ```typescript // main.ts import { renderWithQiankun, qiankunWindow } from vite-plugin-qiankun; renderWithQiankun(qiankunWindow.__POWERED_BY_QIANKUN__); ``` 通过以上步骤,可以快速将应用接入乾坤微前端框架。
  • 基于Vue的实现方案——(qiankun)
    优质
    乾坤(Qiankun)是一款专为Vue.js应用设计的微前端框架,它允许开发者将大型单页应用程序拆分为多个独立可维护的服务,并通过动态加载的方式整合运行,从而提高开发效率和系统灵活性。 功能说明:1. 此实例包含有一个`qiankun-main`主应用和一个名为`qiankun-vue-child`的Vue子应用进行演示。2. 主应用能够跨域访问子应用系统。3. 项目中没有预安装node_modules,请执行npm install命令来安装所需依赖包。更新时间:2021-03-26。
  • qiankun:简洁快速的完整解决方案
    优质
    简介:Qiankun是一款旨在提供微前端架构的JavaScript库,它能够帮助开发者以更高效的方式管理多个单页面应用(SPA),实现组件级别的拆分和独立部署。通过其简洁、灵活的设计理念,使得各个前端应用可以无缝集成在一个统一的应用框架中,从而极大地提升了开发效率与用户体验。 qiankun(乾坤)是一个用于实现微前端架构的库,它允许开发者将多个单页面应用聚合到一个主应用中运行。通过 qiankun,不同团队可以独立开发、部署各自的前端模块,并且这些模块可以在同一个浏览器窗口内相互通讯和协作。 该框架提供了丰富的配置选项来满足不同的业务场景需求,比如支持动态加载微应用、定制化资源预加载策略以及细粒度的生命周期管理等。此外,qiankun 还具备良好的兼容性和扩展性,能够与现有的前端技术和工具链无缝集成,为用户提供更加灵活和高效的应用开发体验。 总体而言,借助 qiankun(乾坤),企业可以更轻松地构建大规模、复杂度高的分布式前端系统,并且在保证业务连续性的前提下实现各个模块之间的解耦合。
  • Vite-Plugin-Importer与Babel-Plugin-Import的
    优质
    本篇技术文章探讨了如何在现代前端项目中将Vite插件Vite-Plugin-Importer和转换工具Babel的插件Babel-Plugin-Import进行有效集成,以实现代码按需加载及自动导入功能。通过合理配置两者,开发者能够显著提升应用性能并优化开发体验。 vite-plugin-importer 集成 babel-plugin-import 的配置方法如下: 首先安装 vite-plugin-importer: ```shell npm install vite-plugin-importer --save # 或者使用 yarn 安装: yarn add vite-plugin-importer ``` 然后在 `vite.config.js` 文件中进行以下配置: ```javascript import { defineConfig } from vite; import usePluginImport from vite-plugin-importer; export default defineConfig({ plugins: [ // 其他插件... usePluginImport({ libraryName: ant-design-vue, libraryDirectory: es }) ] }); ``` 注意,这里仅提供了一个示例配置,并未包含所有可能的选项。根据具体需求和项目结构进行相应调整。
  • Vue3+Vite+Qiankun+Monorepo架构
    优质
    本项目采用先进的前端技术栈,包括Vue 3、Vite和Qiankun微前端解决方案,并结合Monorepo管理,实现高效开发与部署。 Vue3+vite+qiankun+monorepo框架Vue3+vite+qiankun+monorepo框架Vue3+vite+qiankun+monorepo框架Vue3+vite+qiankun+monorepo框架Vue3+vite+qiankun+monorepo框架Vue3+vite+qiankun+monorepo框架Vue3+vite+qiankun+monorepo框架Vue3+vite+qiankun+monorepo框架Vue3+vite+qiankun+monorepo框架Vue3+vite+qiankun+monorepo框架 简化后: 使用 Vue3、vite、qiankun 和 monorepo 框架。
  • vite-plugin-mpa:支MPA(多页)插件
    优质
    Vite-plugin-mpa是一款专为Vite框架设计的插件,旨在简化多页面应用(MPA)开发流程,通过配置可轻松实现不同页面间的独立优化和高效构建。 Vite-plugin-mpa 是一款开箱即用的多页面应用程序插件,适用于 Vite,并支持 Vue2、Vue3 和 React 等框架。 动机:访问本机支持多页功能时,通常需要配置 `rollupOptions.input` 参数。这意味着开发人员在使用 `$projectRoot/src/pages/index/xxx.html` 时必须打开 `localhost:3000/src/pages/index/xxx.html`。 vue-cli 可以帮助重写 MPA 的 URL,而此插件执行相同的操作,并自动为您打开第一页。 实验:构建过程中,该插件会整理文件夹(如 vue-cli),将 `dist/src/pages/subpage/index.html` 移动到 `dist/subpage/index.html`。 使用方法: ``` yarn add vite-plugin-mpa // 在 vite.config.ts 中进行相应配置 ```
  • Vite-Plugin-Vue2:适Vite的Vue2插件
    优质
    Vite-Plugin-Vue2是一款专为Vite构建工具设计的插件,旨在支持Vue2项目开发。它提供了快速的冷启动和热更新功能,优化了开发体验,使得使用Vue2进行前端应用开发变得更加高效便捷。 要使用vite-plugin-vue2,请运行`yarn add vite-plugin-vue2 --dev`以将插件添加到项目中,并在`vite.config.js`文件里进行如下配置: ```javascript const { createVuePlugin } = require(vite-plugin-vue2); module.exports = { plugins: [ createVuePlugin(/*options*/) ] } ``` 关于参数选项: - `vueTemplateOptions`: 类型为 Object,默认值为 null。用于自定义 Vue 模板编译器的配置。 - `jsx`: 类型 Boolean, 默认值 false。是否开启 JSX 转换功能。 - `jsxOptions`: 类型 Object, 用于指定 JSX 转换的相关选项。
  • Vite-Plugin-Md:适Vite的Markdown插件
    优质
    Vite-Plugin-Md是一款专为Vite框架设计的Markdown插件,旨在简化静态网站开发流程,支持快速预览和构建,助力开发者高效创作。 vite-plugin-md 降价促销 将Markdown用作Vue组件 在Markdown中使用Vue组件 Vite 2为0.2.x版本,Vite 1为0.1.x版本 安装步骤: ```bash npm i vite-plugin-md -D # 或者 yarn add vite-plugin-md -D ``` 将其添加到vite.config.js文件里: ```javascript import Vue from @vitejs/plugin-vue; import Markdown from vite-plugin-md; export default { plugins: [ Vue(), Markdown() ] } ```
  • Vite-Plugin-SVG-Icons:于迅速生SVG精灵的Vite插件
    优质
    简介:Vite-Plugin-SVG-Icons是一款高效的Vite插件,旨在快速生成SVG图标精灵,简化开发流程并提升前端项目的性能与美观度。 vite-plugin-svg-icons 是一个用于生成 SVG 图标精灵的插件。它的特点包括在项目运行时预加载所有图标,并且只需操作一次 DOM 节点以提高性能,同时它还内置了高性能缓存功能,在文件修改后才会重新生成。 **安装方法** - 使用 Yarn 或 npm 安装 - Node 版本要求:>=12.0.0 - 插件版本号:>=2.0.0 ```bash yarn add vite-plugin-svg-icons -D ``` 或 ```bash npm i vite-plugin-svg-icons -D ``` **配置方法** 在 `vite.config.ts` 文件中进行如下配置: ```typescript import viteSvgIcons from vite-plugin-svg-icons; import path from path; export default () => { return { plugins: [ viteSvgIcons({ // 配置项可以在此处添加 ``` 以上内容介绍如何使用这个插件来生成和管理 SVG 图标。
  • Vite-Plugin-Windicss:为Vite打造的Windicss插件
    优质
    Vite-Plugin-Windicss是一款专为Vite项目设计的Windicss插件,旨在加速Windicss在开发环境中的应用与编译速度。 vite-plugin-windicss Vite的按需TailwindCSS插件 特性: - 快速:比使用Vite的其他Tailwind CSS解决方案快15到20倍。 - 按需CSS实用程序(兼容Tailwind CSS v2)。 - 按需本地元素样式重置 - 热模块更换(HMR) - 从tailwind.config.js加载配置文件 - 与框架无关:适用于Vue,React,Svelte和Vanilla等各类项目。 - 转换CSS @apply 和 @screen指令(包括用于Vue SFC的< style >标签) 使用方法: 安装插件: ```shell npm i vite-plugin-windicss -D # 或者 yarn add vite-plugin-windicss -D ``` 将其添加到vite.config.js文件中: ```javascript import WindiCSS from vite-plugin-windi; export default { plugins: [WindiCSS()], } ```