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

Vue2

在这篇文档中，你可以了解到如何基于 Emp 来构建一个 Vue2 应用。

前期准备

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

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

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

创建项目

emp支持使用脚手架创建Vue2项目,我们使用create-emp来创建一个 Emp + Vue2 的项目，调用命令如下：

npm
yarn
pnpm
bun
npm create emp@latest

输入命令后，首先会提示你输入项目文件夹名称，根据您的需求输入设置即可，接下来在Select framework时选择Vue2即可创建一个全新的Vue2 Emp项目🎉。

运行项目

💡 TIP

建议使用您对应创建项目时使用的包管理器执行后续的命令，推荐使用PNPM作为您项目的包管理器。

由于初始的项目不包含项目所需要的依赖，所以在运行项目之前，您需要安装所必须的所有依赖，调用命令：

npm
yarn
pnpm
bun
npm install

安装完依赖后，您可以直接调用如下命令运行项目：

npm
yarn
pnpm
bun
npm run dev

接下来Emp会极速为您构建运行项目⚡，最后访问http://localhost:9002/即可查看项目运行的效果。

目录约定

── node_modules // 依赖目录 ├── src | ├── App.vue // 应用主组件 | ├── boostrap.tsx // 项目入口文件 | └── index.ts // 主要入口文件 ├── .gitignore // Git忽略文件列表 ├── emp-config.js // emp配置文件 ├── package.json // 项目依赖及配置信息 └── README.md // 项目说明文档

常见问题

项目没有html模板，我需要更改项目icon怎么办？

默认项目的icon为React的icon，我们有两种方法更改项目的icon：

  • （✨推荐）参考 设置页面图标 进行配置 配置完毕后，重新启动您项目即可查看到您的更改🔧。

  • 参考 设置页面模板 进行配置 配置完毕后，重新启动您项目即可查看到您的更改🔧。

使用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中遇到类似的问题，您也可以尝试这两个方案进行解决。