0
# Project Creation
1

2
Comprehensive project scaffolding system with support for multiple frameworks, templates, and customization options.
3

4
## Capabilities
5

6
### Project Class
7

8
Main class for creating new Taro projects with complete scaffolding and configuration setup.
9

10
```typescript { .api }
11
/**
12
 * Project creation and management class extending Creator
13
 */
14
class Project extends Creator {
15
  conf: IProjectConf;
16
  
17
  /**
18
   * Initialize project creator with configuration
19
   * @param options - Project configuration options
20
   */
21
  constructor(options: IProjectConf);
22
  
23
  /**
24
   * Initialize project creation process
25
   * @returns Promise that resolves when initialization completes
26
   */
27
  init(): Promise<void>;
28
  
29
  /**
30
   * Create project from template with full scaffolding
31
   * @returns Promise that resolves when project creation completes
32
   */
33
  create(): Promise<void>;
34
  
35
  /**
36
   * Get CLI version for project metadata
37
   * @returns Version string
38
   */
39
  getCliVersion(): string;
40
}
41
```
42

43
### Project Configuration
44

45
Complete configuration interface for project creation with all supported options.
46

47
```typescript { .api }
48
/**
49
 * Complete project configuration interface
50
 */
51
interface IProjectConf {
52
  /** Name of the project */
53
  projectName: string;
54
  /** Directory where project will be created */
55
  projectDir: string;
56
  /** Package manager to use */
57
  npm: NpmType;
58
  /** Template source location */
59
  templateSource: string;
60
  /** Template name to use */
61
  template: string;
62
  /** Project description */
63
  description?: string;
64
  /** Enable TypeScript support */
65
  typescript?: boolean;
66
  /** Enable ES5 build support */
67
  buildEs5?: boolean;
68
  /** CSS preprocessor to use */
69
  css: CSSType;
70
  /** Creation date timestamp */
71
  date?: string;
72
  /** Source directory name */
73
  src?: string;
74
  /** Source root directory */
75
  sourceRoot?: string;
76
  /** Environment configuration */
77
  env?: string;
78
  /** Enable automatic package installation */
79
  autoInstall?: boolean;
80
  /** Hide default template options */
81
  hideDefaultTemplate?: boolean;
82
  /** Framework to use */
83
  framework: FrameworkType;
84
  /** Compiler type */
85
  compiler?: CompilerType;
86
  /** Custom configuration callback */
87
  ask?: (config: object) => Promise<void> | void;
88
  /** Enable git clone for templates */
89
  clone?: boolean;
90
}
91

92
/**
93
 * Partial project configuration for flexible initialization
94
 */
95
type ProjectOptions = CustomPartial<IProjectConf, 
96
  'projectName' | 'framework' | 'css' | 'npm' | 'templateSource' | 'template'
97
>;
98
```
99

100
**Usage Examples:**
101

102
```typescript
103
import { Project } from "@tarojs/cli";
104

105
// Create React project with TypeScript
106
const project = new Project({
107
  projectName: 'my-taro-app',
108
  projectDir: '/path/to/projects/my-taro-app',
109
  framework: 'react',
110
  typescript: true,
111
  css: 'sass',
112
  npm: 'pnpm',
113
  templateSource: 'default',
114
  template: 'default',
115
  compiler: 'webpack5',
116
  autoInstall: true
117
});
118

119
await project.init();
120
await project.create();
121

122
// Create Vue3 project with custom template
123
const vueProject = new Project({
124
  projectName: 'vue-mini-app',
125
  projectDir: '/path/to/vue-mini-app',
126
  framework: 'vue3',
127
  css: 'less',
128
  npm: 'yarn',
129
  templateSource: 'https://github.com/custom/taro-vue-template.git',
130
  template: 'vue-custom',
131
  description: 'Custom Vue3 mini program',
132
  clone: true
133
});
134

135
await vueProject.create();
136
```
137

138
### Framework Support
139

140
Supported frameworks with their specific configurations and features.
141

142
```typescript { .api }
143
/**
144
 * Supported framework types
145
 */
146
type FrameworkType = 'react' | 'vue3' | 'preact' | 'solid';
147

148
/**
149
 * Framework-specific configuration mapping
150
 */
151
interface FrameworkConfig {
152
  react: {
153
    plugin: '@tarojs/plugin-framework-react';
154
    templates: ['default', 'mobx', 'redux', 'dva'];
155
    typescript: boolean;
156
  };
157
  vue3: {
158
    plugin: '@tarojs/plugin-framework-vue3';
159
    templates: ['default', 'composition-api'];
160
    typescript: boolean;
161
  };
162
  preact: {
163
    plugin: '@tarojs/plugin-framework-react';
164
    templates: ['default'];
165
    typescript: boolean;
166
  };
167
  solid: {
168
    plugin: '@tarojs/plugin-framework-solid';
169
    templates: ['default'];
170
    typescript: boolean;
171
  };
172
}
173
```
174

175
### Compiler Options
176

177
Available compilation systems with their configurations and capabilities.
178

179
```typescript { .api }
180
/**
181
 * Supported compiler types
182
 */
183
type CompilerType = 'webpack5' | 'vite' | 'esbuild';
184

185
/**
186
 * Compiler-specific features and limitations
187
 */
188
interface CompilerFeatures {
189
  webpack5: {
190
    platforms: ['weapp', 'alipay', 'swan', 'tt', 'qq', 'jd', 'h5', 'rn'];
191
    features: ['hot-reload', 'code-splitting', 'tree-shaking'];
192
  };
193
  vite: {
194
    platforms: ['h5'];
195
    features: ['fast-hmr', 'es-modules', 'optimized-deps'];
196
  };
197
  esbuild: {
198
    platforms: ['h5'];
199
    features: ['fast-build', 'tree-shaking'];
200
  };
201
}
202
```
203

204
### Template Management
205

206
Template system for project scaffolding with support for local and remote templates.
207

208
```typescript { .api }
209
/**
210
 * Template source types
211
 */
212
type TemplateSourceType = 'git' | 'url';
213

214
/**
215
 * Template information interface
216
 */
217
interface ITemplates {
218
  name: string;
219
  value: string;
220
  platforms?: string[];
221
  desc?: string;
222
}
223

224
/**
225
 * Get template source type from URL
226
 * @param url - Template URL or reference
227
 * @returns Template source type
228
 */
229
function getTemplateSourceType(url: string): TemplateSourceType;
230

231
/**
232
 * Available default templates by framework
233
 */
234
interface DefaultTemplates {
235
  react: {
236
    default: 'Basic React project with Taro';
237
    mobx: 'React project with MobX state management';
238
    redux: 'React project with Redux toolkit';
239
    dva: 'React project with Dva framework';
240
  };
241
  vue3: {
242
    default: 'Basic Vue3 project with Composition API';
243
    'composition-api': 'Vue3 project optimized for Composition API';
244
  };
245
  preact: {
246
    default: 'Basic Preact project';
247
  };
248
  solid: {
249
    default: 'Basic SolidJS project';
250
  };
251
}
252
```
253

254
### CSS Preprocessors
255

256
Supported CSS preprocessing options with configuration.
257

258
```typescript { .api }
259
/**
260
 * Supported CSS preprocessor types
261
 */
262
type CSSType = 'sass' | 'stylus' | 'less' | 'none';
263

264
/**
265
 * CSS preprocessor configurations
266
 */
267
interface CSSConfig {
268
  sass: {
269
    extensions: ['.scss', '.sass'];
270
    loader: 'sass-loader';
271
  };
272
  stylus: {
273
    extensions: ['.styl', '.stylus'];
274
    loader: 'stylus-loader';
275
  };
276
  less: {
277
    extensions: ['.less'];
278
    loader: 'less-loader';
279
  };
280
  none: {
281
    extensions: ['.css'];
282
    loader: null;
283
  };
284
}
285
```
286

287
### Package Managers
288

289
Supported package manager configurations and commands.
290

291
```typescript { .api }
292
/**
293
 * Supported package manager types
294
 */
295
type NpmType = 'npm' | 'yarn' | 'pnpm' | 'cnpm';
296

297
/**
298
 * Package manager specific commands and configurations
299
 */
300
interface PackageManagerConfig {
301
  npm: {
302
    install: 'npm install';
303
    dev: 'npm run dev';
304
    build: 'npm run build';
305
  };
306
  yarn: {
307
    install: 'yarn';
308
    dev: 'yarn dev';
309
    build: 'yarn build';
310
  };
311
  pnpm: {
312
    install: 'pnpm install';
313
    dev: 'pnpm dev';
314
    build: 'pnpm build';
315
  };
316
  cnpm: {
317
    install: 'cnpm install';
318
    dev: 'cnpm run dev';
319
    build: 'cnpm run build';
320
  };
321
}
322
```
323

324
### Project Structure
325

326
Generated project directory structure and key files created during scaffolding.
327

328
```typescript { .api }
329
/**
330
 * Standard Taro project structure
331
 */
332
interface ProjectStructure {
333
  'src/': {
334
    'app.tsx' | 'app.vue': 'Main application component';
335
    'app.config.ts': 'Application configuration';
336
    'app.scss' | 'app.less' | 'app.styl': 'Global styles';
337
    'pages/': {
338
      'index/': {
339
        'index.tsx' | 'index.vue': 'Index page component';
340
        'index.config.ts': 'Page configuration';
341
        'index.scss': 'Page styles';
342
      };
343
    };
344
  };
345
  'package.json': 'Package configuration';
346
  'project.config.json': 'Mini program project config';
347
  'babel.config.js': 'Babel configuration';
348
  'config/': {
349
    'index.js': 'Build configuration';
350
    'dev.js': 'Development configuration';
351
    'prod.js': 'Production configuration';
352
  };
353
}
354
```