logo
  • 指南
  • API
  • 博客
  • 简体中文
    • 简体中文
    • English
    • 开始
      介绍
      术语表
      环境要求
      快速开始
      基础
      Rspack
      渲染上下文
      客户端渲染
      路径别名
      基础路径
      模块链接

      最后更新于: 2025/11/20 02:46:56

      上一页环境要求下一页Rspack

      #快速开始

      #创建项目

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

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

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

      #选择模板

      运行命令后,你会看到模板选择界面:

      #可用模板

      模板描述
      shared-modules微前端共享模块解决方案
      vue-csrVue 3 客户端渲染
      vue-ssrVue 3 服务端渲染
      vue2-csrVue 2.7 客户端渲染
      vue2-ssrVue 2.7 服务端渲染

      #指定模板

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

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

      #组合参数示例

      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。
      • 若端口占用,修改 npm run dev 配置或调整端口环境变量。
      • 如安装失败,检查代理或使用国内镜像源。

      #项目结构

      创建的项目结构如下:

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

      #高级选项

      #覆盖现有目录

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

      npm create esmx@latest my-app --force

      #指定项目名称

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

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