/qiankun-vue/main/...router/index.js import { createRouter,createWebHistory } from 'vue-router'; const Home= () => import(/*WebpackChunkName*/'@/views/Home.vue') const About= () => import(/*WebpackChunkName*/'@/views/About.vue') const routes=[ {path:'/',name:'home',compone...
我们以 实战案例 - feature-inject-sub-apps 分支 为例,我们在主应用的同级目录(micro-app-main同级目录),使用vue-cli先创建一个Vue的项目,在命令行运行如下命令: 代码语言:javascript 复制 vue create micro-app-vue 本文的vue-cli选项如下图所示,你也可以根据自己的喜好选择配置。 micro-app 在新建项目完成后...
// vue.config.jsconst{name}=require('./package');module.exports=defineConfig({// 打开文件访问的相对路径 独立项目 通过项目根目录访问publicPath:'http://localhost:8081',// '/' // 部署上线后,换成子应用打开的路径// transpileDependencies: true, // 转义依赖项productionSourceMap:false,configureWebp...
我们先使用vue-cli生成一个Vue的项目,初始化主应用。 将普通的项目改造成qiankun主应用基座,需要进行三步操作: 创建微应用容器 - 用于承载微应用,渲染显示微应用; 注册微应用 - 设置微应用激活条件,微应用地址等等; 启动qiankun; 创建微应用容器 我们先在主应用中创建微应用的承载容器,这个容器规定了微应用的显示...
第一步:创建angular cli环境,创建angular项目,安装qiankun npm install-g@angular/cli//创建angular环境ngnewangular-app//创建angular项目npm i qiankun--save//安装qiankun 第二步:创建vue cli环境,创建vue项目,安装qiankun npm install-g@vue/cli//创建vue环境vue create vue-app//创建vue项目npm i qiankun...
2. 创建 Vue 应用 接着,我们需要创建一个 Vue 应用,这里以vue-cli的方式为例: npm install -g vue-cli vue create vue-app 3. 安装 qiankun 安装qiankun: npm install qiankun 4. 在 React 应用中注册子应用 在React 应用中注册 Vue 应用作为子应用,通过调用 qiankun 的 registerMicroApps 方法实现: ...
使用乾坤项目,主项目使用umiJS,子项目使用Vuejs + ElementUI。 回到顶部 出现的问题 本地启动后,从主项目进入子项目xxx-front,不显示elementui的图标(显示方框),控制台提示: Failed to decode downloaded font: http://localhost:9000/child/xxx-front/fonts/element-icons.ff18efd1.wofflogin:1 OTS parsing err...
使用vue cli 快速创建主应用; 安装qiankun $ yarn add qiankun # 或者 npm i qiankun -S 调整主应用 main.js 文件:具体如下: import Vue from "vue" import App from "./App.vue" import router from "./router" import { registerMicroApps, setDefaultMountApp, start } from "qiankun" Vue.config...
通过vue-cli 构建一个主应用工程,安装微前端依赖 qiankun, yarn add qiankun 或 npm i qiankun。 改造main.js // 引入依赖 import Vue from 'vue'; import App from './App.vue'; import store from './store'; import router from './router'; ...
步骤1:创建Vue 3.2项目使用Vue CLI创建新的Vue 3.2项目。打开终端,切换到项目目录,并执行以下命令: vue create my-project 选择“Manually select features”并勾选“TypeScript”和“Router”,以便在项目中启用TypeScript和Vue Router。步骤2:安装Qiankun进入项目目录,并执行以下命令来安装Qiankun: cd my-project ...