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

Vue3

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

前期准备

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

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

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

创建 Vue3 项目

你可以使用 create-emp 来创建一个 Emp + Vue3 的项目，调用以下命令：

npm
yarn
pnpm
bun
npm create emp@latest

然后在 Select framework 时选择 Vue 3 即可。

安装依赖

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

npm
yarn
pnpm
bun
npm install

运行 Vue3 项目

在安装完项目依赖后，启动项目：

npm
yarn
pnpm
bun
npm dev

运行成功后，你可以访问 http://localhost:8000/ 进行查看。

目录约定

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

常见问题

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