• 简体中文

      • 快速开始

      创建项目

      运行以下命令创建 Esmx 项目：

      npm
      yarn
      pnpm
      bun
      deno
      npm create esmx@latest my-app

      注意：命令会根据你使用的包管理器自动适配；以下示例使用 npm 格式。

      选择模板

      运行命令后，你会看到模板选择界面：

      可用模板

      模板描述
      shared-modules用于创建跨项目共享的微前端模块
      vue-csrVue 3 客户端渲染
      vue-ssrVue 3 SSR
      react-csrReact 18+ 客户端渲染
      react-ssrReact 18+ SSR
      vue2-csrVue 2.7 客户端渲染
      vue2-ssrVue 2.7 SSR

      命令行选项

      本脚手架支持通过命令行参数直接指定模板或配置项目，以跳过交互式选择。

      指定模板

      你也可以通过 -t 或 --template 选项直接指定模板，跳过交互式选择：

      npm create esmx@latest my-app -- --template vue-csr

      指定项目名称

      使用 --name 或 -n 选项指定项目名称：

      npm create esmx@latest my-app -- --name my-project

      强制覆盖

      使用 --force 或 -f 选项强制覆盖现有目录：

      npm create esmx@latest my-app -- --force

      组合使用

      可以将多个选项组合使用：

      npm create esmx@latest my-app -- --template vue-ssr --name my-project --force

      启动开发服务器

      创建项目后，进入目录启动开发服务器：

      cd my-app
npm install
npm run dev

      开发服务器将在 http://localhost:3000 启动。

      生产环境构建

      构建生产环境版本：

      npm run build
npm run start

      故障排查

      • Node.js 版本应为 >= 24。
      • 如果端口被占用，请修改开发服务器配置或调整端口环境变量。
      • 如果安装失败，请检查网络代理设置，或尝试使用国内镜像源。

      项目结构

      创建的项目结构如下：

      my-app/
├── src/                            # 源代码
│   ├── app.vue                     # 应用组件
│   ├── create-app.ts               # 应用创建函数
│   ├── entry.client.ts             # 客户端入口
│   ├── entry.node.ts               # 开发服务器入口
│   ├── entry.server.ts             # SSR 入口
│   └── components/                 # 组件目录
│       └── hello-world.vue
├── tsconfig.json                   # TypeScript 配置
├── package.json                    # 项目依赖和脚本
└── README.md                       # 项目说明