docs: update /getting-started

dromara · Apr 30, 2024 · 734028f · 734028f
1 parent 94b5aa3
commit 734028f
Showing 1 changed file with 51 additions and 16 deletions.
diff --git a/docs/content/getting-started.md b/docs/content/getting-started.md
@@ -1,52 +1,86 @@
 ---
-title: Getting Started Guide
+title: Getting Started
 ---
 
-# Getting Started Guide
+# Getting Started
 
-Welcome to the beginner's guide for the Newcar animation engine! Here, you will learn some of the fundamental concepts and knowledge about Newcar, including:
+Welcome to the beginner's guide for the Newcar animation engine! With this guide, you can learn some of the fundamental concepts and knowledge about Newcar, including:
 
 - `CarEngine`
 - `App`
 - `Scene`
 - `Widget`
 - `Animation`
 
-These concepts will be explained in detail in future documents. This guide will briefly introduce the basic usage of the Newcar animation engine, allowing you to quickly grasp the development philosophy of Newcar. Without further ado, let's get started!
+These concepts will be explained in detail in future documents. This guide will help you to learn the basic usage of the Newcar animation engine.
 
 ## Creating a Newcar Project
 
 "To do a good job, an artisan needs the best tools."
 
-First, you need to prepare the following:
+First, make sure you have the following tools installed:
 
 - Node.js
-- NPM/PNPM/YARN
-- A modern code editor, such as VSCode, Webstorm, etc.
+- A package manager, such as NPM, Yarn, or PNPM
+- A modern code editor, such as VSCode, Webstorm
 - A browser that supports WebAssembly compilation, here we recommend the latest versions of Firefox, Chrome, Edge
 
-We recommend using PNPM and Vite to create our project. For the sake of demonstration, we will use a Vanilla environment, but you can also choose your preferred framework.
+### Newcar CLI
+
+We provide a [CLI tool](https://www.npmjs.com/package/@newcar/cli) to help you create a Newcar project quickly.
+
+If you're using it for the first time, you need to install it globally.
+
+:::code-group
+
+```shell [npm]
+$ npm install -g @newcar/cli
+```
+
+```shell [yarn]
+$ yarn global add @newcar/cli
+```
+
+```shell [pnpm]
+$ pnpm add -g @newcar/cli
+```
+
+:::
+
+Then, you can create a Newcar project by running the following command:
+
+```shell
+$ ncli create my-newcar-project
+$ cd my-newcar-project
+$ npm install
+```
+
+### Vite CLI
+
+We recommend using [PNPM + Vite](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) to create our project.
 
 ```shell
 $ pnpm create vite my-newcar-project
 $ cd my-newcar-project
 $ pnpm install
 ```
 
-Next, we need to install two things: Newcar itself and CanvasKit-WASM.
+Next, install Newcar and CanvasKit-WASM packages.
 
 ```shell
 $ pnpm add newcar
 $ pnpm add canvaskit-wasm
 ```
 
-We can see that Vite has automatically included `main.ts` in `index.html`. Let's clear everything in `main.ts` and add a `<canvas>` tag in the `<body>` section of `index.html`.
+## Basic Initialization
+
+Add a `<canvas>` element to your HTML file for rendering.
 
 ```html
 <canvas width="1600" height="900" id="canvas"></canvas>
 ```
 
-Then, add the following code in `main.ts`.
+Then, import Newcar and initialize the `CarEngine` object.
 
 ```typescript
 import * as nc from "newcar";
@@ -81,19 +115,20 @@ app.checkout(scene);
 app.play();
 ```
 
-First, we created a root, which is a `Widget` subclass `Circle`. The constructor's first parameter of this subclass is the radius of the circle, which we set to `100`.
+First, we created a circle widget, which is a [offical extension of basic widget](/dev/basic-widget). The constructor's first parameter of this subclass is the radius of the circle, which we set to `100`.
+
+Then, we created a `Scene` object and set the circle widget as the root widget of this scene. A scene can only have one root widget, but a root widget can have multiple child widgets, and these child widgets can have their own children, thus forming a tree structure for a scene.
 
-Next, we created a `Scene` object and set root as the root widget of this scene. A scene can only have one root widget, but a root widget can have multiple child widgets, and those child widgets can have their own children, thus forming a tree structure for a scene.
 Finally, we used the `App.checkout` method to switch to this scene and the `App.play` method to play the animation.
 
-If everything is correct, you should see a white circle with a radius of `100` on the canvas.
+If you setup the project correctly, you will see a white circle on the screen.
 
 ## Adding Animation
 
 ```typescript
 root.animate(nc.create, 0, 30);
 ```
 
-This method will add an animation named `create` to this root widget and set the animation start at the 0th time unit.
+This method will add an animation named `create` to this root widget and set the animation start at the first time unit.
 
-Congratulations! You have now understood the basic usage of the Newcar animation engine. We will explain each concept in detail next. If you like our project, feel free to join us and contribute or give us a free Star on GitHub.
+Congratulations! You have learned the basic usage of the Newcar animation engine. We will explain more deeply later. If you like our project, feel free to join us and contribute or give us a free Star on our [Repository](https://github.com/dromara/newcar).