create-gem-app 是一个命令行工具,可以快速基于模版仓库搭建你的前端项目:
npx create-gem-app my-app
code my-appsrc
├── elements # 组织项目中通用的自定义元素
├── pages # 组织项目中路由级元素
├── service # RESTFul API 调用以及数据类型定义
├── store # 按模块组织 `Store`
├── types # 前端资源、模块的类型定义
├── main.ts # 项目入口文件
├── index.ts # 项目根元素定义
├── routes.ts # Route 定义
└── logo.svg利用 tsconfig-paths-webpack-plugin 让你能在模块中使用绝对路径导入依赖:
import 'src/elements/nav';
import routes from 'src/routes';使用绝对路径能让你更加清楚依赖的内容。
项目使用 workbox-webpack-plugin 和 webpack-pwa-manifest 添加了 PWA 的支持,可以在 webpack.config.json 中根据你的项目自定义细节。
项目自带 Mock API 的功能,使用下面的命令启用 Mock 功能:
npm run dev使用 intermock 根据 RESTFul API 类型定义生成内容:
// src/service/api.ts
// RESTFul API 响应的类型定义
export interface Post {
id: number;
userId: number;
title: string;
body: string;
}// mock/api.js
// mock 文件
const proxy = {
'/api/posts': Array(100)
.fill(null)
.map(
() =>
mock({
files: readFiles(['../src/service/api.ts']),
})['Post'],
),
};create-gem-app 默认使用 gem-boilerplate 作为模版,实际上,它还支持其他使用 Gem 的模版:
lib: 适用于搭建基于 GemElement 的 UI 库
wasm: 使用于搭建应用了 Rust/WebAssembly 的自定义元素库
你可以使用 -t 参数指定模版:
npx create-gem-app my-app -t lib
# 或
npx create-gem-app my-app -t wasm