logo
指南
配置
插件
指南
配置
插件
简体中文

Vue2 MF

在Vue2中，我们准备了两个进阶示例项目作为参考，分别是：

  • vue-2-base：基础项目，用于书写通用业务组件对外暴露，它通常是一些项目的基石。
  • vue-2-project：应用项目，用于和其他通用业务组件进行集成，它通常是一些项目的业务逻辑。
💡 TIP

两个业务的demo仅仅只是部分依赖以及emp的配置不一样，您可以根据您的业务需求进行自由选择或者组合。

前期准备

在开始之前，请确保您已经配备了如下开发环境：

  • Node.js >= 20.0.0
  • npm >= 8
💡 TIP

建议您使用nvm来管理node版本，直接执行nvm use 20命令即可完成开发环境设置

安装emp⚡

具体操作步骤请参考快速上手

项目初始化

在对项目进行初始化之前，我们先克隆emp仓库，将示例代码拉取到本地。

git clone https://github.com/empjs/emp
🚨 可能遇到的错误

如果您无法拉取项目至本地，请检查您的网络环境或代理设置是否可以访问github，如果仍不能解决，请联系我们。

在拉取完成代码后，我们进入代码的根目录，安装项目依赖，推荐使用PNPM进行安装：

npm
yarn
pnpm
bun
npm install

安装完依赖后，运行Vue2示例项目的前期准备就完成了🎉。

运行示例项目

⚠️ 注意

在运行示例项目之前，请确保您已经完成了前期准备，并当前目录处于emp仓库的根目录下。

vue2 demo

首先进入示例项目的根目录：

cd demos/vue2

然后运行代码：

npm
yarn
pnpm
bun
npm dev

运行成功后，您可以分别访问http://localhost:9001/ 与 http://localhost:9002/进行查看。

演示效果

:9001 基站效果：

:9002 应用效果：

远程组件调用

vue-2-project/src/App.vue
<template>
  <div class="main">
    <h1>Project App vue 2 project</h1>
    <h2>=== @v2b/Content ===</h2>
    <Content />
    <h2>CompositionApi</h2>
  <CompositionApi />
    <h2>=== @v2b/Table ===</h2>
    <Table />
  </div>
</template>

<script>
//import Content from "@v2b/Content"
export default {
  components: {
    Content: () => import('@v2b/Content'),
    Table: () => import('@v2b/Table'),
    CompositionApi: () => import('@v2b/CompositionApi'),
  },
}
</script>

<style scoped lang="scss">
.main {
  img {
    width: 200px;
  }

  h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 60px;
  }
}
</style>

项目配置

vue-2-base/emp.config.ts
import {defineConfig} from '@empjs/cli'
import vue from '@empjs/plugin-vue2'
import {pluginRspackEmpShare} from '@empjs/share'
export default defineConfig(store => {
  return {
    plugins: [
      vue(),
      pluginRspackEmpShare({
        name: 'vue2Base',
        // 基站暴露远程组件
        exposes: {
          './Content': './src/components/Content',
          './Table': './src/components/table',
          './CompositionApi': './src/components/CompositionApi',
          './store': './src/store',
        },
        empRuntime: {
          // 模块联邦运行时依赖
          runtimeLib: "https://unpkg.yy.com/@empjs/share@3.1.5/output/sdk.js",
          // 框架与公共库依赖
          shareLib: {
            vue: 'Vue@https://unpkg.com/vue@2.7.14/dist/vue.min.js',
            vuex: "Vuex@https://unpkg.com/vuex@3.6.2/dist/vuex.min.js",
            'element-ui': [
              'ELEMENT@https://unpkg.com/element-ui/lib/index.js',
              "https://unpkg.com/element-ui/lib/theme-chalk/index.css",
            ],
          },
          framework: 'vue2',
        },
      }),
    ],
    html: {
      title: 'EMP3 vue2 base',
    },
    server: {
      port: 9001,
      open: false,
    },
    appEntry: 'main.js',
    debug: {
      clearLog: false,
    },
  }
})
vue-2-project/emp.config.ts
import {defineConfig} from '@empjs/cli'
import vue from '@empjs/plugin-vue2'
import {pluginRspackEmpShare} from '@empjs/share'
// cf 1
//
export default defineConfig(store => {
  const ip = store.getLanIp()
  const vue2Base = `http://${ip}:9001/emp.js`
  return {
    plugins: [
      vue(),
      pluginRspackEmpShare({
        name: 'vue2Base',
        // 配置依赖的远程项目
        remotes: {
          '@v2b': `vue2Base@${vue2Base}`,
        },
        empRuntime: {
          // 模块联邦运行时依赖
          runtimeLib: "https://unpkg.yy.com/@empjs/share@3.1.5/output/sdk.js",
          // 框架与公共库依赖
          shareLib: {
            vue: 'Vue@https://unpkg.com/vue@2.7.14/dist/vue.min.js',
            vuex: "Vuex@https://unpkg.com/vuex@3.6.2/dist/vuex.min.js",
            'element-ui': [
              'ELEMENT@https://unpkg.com/element-ui/lib/index.js',
              "https://unpkg.com/element-ui/lib/theme-chalk/index.css",
            ],
          },
          framework: 'vue2',
        },
      }),
    ],
    html: {
      title: 'EMP3 vue2 project',
    },
    server: {port: 9002},
    appEntry: 'main.js',
  }
})

常见问题

使用yarn无法启动项目，缺失部分module

在Vue项目中，我们使用了 @empjs/plugin-vue2 和 @empjs/plugin-vue3 两个插件，在实际开发中，我们注意到了这个模块缺失导致的问题。 这是因为在这两个插件中，我们引用了 vue-loader 这个依赖，而这个依赖又依赖于 webpack， 由于yarn的包管理机制，我们无法在高版本的Node版本下安装 webpack 的低版本，所以导致了这一问题的发生。

目前对于这个问题的解决，我们提供了两种方案进行选择：

  • （✨推荐） 使用 pnpm 包管理器解决这一问题。由于pnpm在这种情况下，会自动将webpack安装更为适合当前node版本的版本，而不是抛出警告然后不安装它，所以使用pnpm可以完美解决这一问题。

  • 如果你想继续使用yarn，您可以手动安装 webpack 这一依赖，具体安装命令如下：

    yarn add webpack

如果您在npm中遇到类似的问题，您也可以尝试这两个方案进行解决。