Vue2项目#

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

• vue-2-base：基础项目，用于书写通用业务组件对外暴露，它通常是一些项目的基石。
• vue-2-project：基础项目，用于和其他通用业务组件进行集成，它通常是一些项目的业务逻辑。
• vue-2-element：基于elemenUI的项目模板，可直接用于业务的研发

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

前期准备#

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

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

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

安装emp⚡#

快速上手

项目初始化#

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

git clone https://github.com/empjs/emp

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

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

npm install

安装完依赖后，因为我们的vue2示例项目都引用了@empjs/cli和@empjs/plugin-vue2的构建产物，两个仓库的源代码在代码根目录下的packages目录下，我们需要构建打包它们。

首先，我们先构建@empjs/cli产物，先进入对应目录：

# 进入@empjs/cli项目
cd packages/cli

然后执行产物构建:

npm build

接下来，我们构建@empjs/plugin-vue2产物，进入对应的目录：

# 进入@empjs/plugin-vue2项目
cd ../plugin-vue2

然后执行产物构建:

npm build

构建成功后，运行Vue2示例项目的前期准备就完成了🎉。

💡TIP：为什么需要@empjs/cli和@empjs/plugin-vue2的构建产物？这是因为在emp项目中，我们的emp配置文件(emp.config.js)引用了这两个构建产物的代码，具体代码如下：

import {defineConfig} from '@empjs/cli'
import vue from '@empjs/plugin-vue2'
export default defineConfig(store => {
  ...
  return {
    plugins: [vue()],
    ...
  }
})

运行示例项目#

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

vue-2-base#

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

# 运行vue-2-base示例项目
cd projects/vue-2-base

然后运行代码：

npm dev

运行成功后，您可以访问http://localhost:9001/进行查看

vue-2-project#

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

# 运行vue-2-project示例项目
cd projects/vue-2-project

然后运行代码：

npm dev

运行成功后，您可以访问http://localhost:9002/进行查看

vue-2-element#

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

# 运行vue-2-element示例项目
cd projects/vue-2-element

然后运行代码：

npm dev

运行成功后，您可以访问http://localhost:9003/进行查看

目录约定#