快速开始

创建项目

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

npm
yarn
pnpm
bun
npm create esmx my-app

选择模板

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

可用模板

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

指定模板

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

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

启动开发服务器

创建项目后,进入目录启动开发服务器:

cd my-app
npm install
npm run dev

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

生产环境构建

构建生产环境版本:

npm run build
npm run start

项目结构

创建的项目结构如下:

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 my-app --force

指定项目名称

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

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