1. Create a project
If you open DevEco Studio for the first time, you will first enter the welcome page.
1. Click Create Project on the welcome page
Enter the project creation page.
2.Select ‘Application’
Then select ‘Empty Ability’ and click ‘Next’ to enter the project configuration page.
3. In the configuration page
Details are as follows:
- Project name is a project name that developers can set by themselves. Here you can change it to your own project name according to your choice.
- Bundle name is the package name. By default, the application ID will also use this name. The corresponding ID needs to be consistent when the application is published.
- Save location is the project save path. It is recommended that users set the corresponding location by themselves.
- Compile SDK is the compiled API version, and API9 is selected by default here.
- Select the Stage model for Model and keep the others as default.
Then click "Finish" to complete the project creation and wait for the project synchronization to be completed.
2. Get to know the DevEco Studio interface
After entering the IDE, we first understand the basic interface. The entire IDE interface can be roughly divided into four parts, namely the code editing area, notification bar, project directory area and preview area.
1. Code editing area
In the middle is the code editing area, where you can modify your code and switch displayed files. By holding down Ctrl and using the mouse wheel, you can zoom in and out of the interface.
2.Notification bar
There is a row of toolbars at the bottom of the editor, which mainly introduces common information bars. Run is the information bar when the project is running, Problems is the current project error and reminder information bar, Terminal is the command line terminal, and command line operations are performed here. PreviewerLog is Previewer log output column, Log is the log output column when the simulator and real machine are running. Will be contacted one after another in subsequent use.
3. Project directory area
The left side is the project directory area, which will be introduced in detail in subsequent chapters.
4.Preview area
Click Previewer in the upper right corner to preview the corresponding file UI display effect.
The previewer provides some basic functions, including rotating the screen, switching display devices, and multi-device preview. Click the rotate button to switch between portrait and landscape displays.
You can also click the following list button to switch the displayed device type. Available Profiles, that is, the available device types, will be displayed in the pop-up box.
If you click Foldable to switch devices, you can also click the rotate button to switch Foldable's horizontal and vertical screen display modes.
Turn on the Muti-profile preview switch to achieve real-time preview of devices of multiple sizes.
Click the component preview button in the upper right corner of the previewer to enter the component preview interface.
Component preview mode can preview the code block corresponding to the current component.
Click on the corresponding component, and the corresponding component code part will be selected in the code file, and the basic properties of the current component will be displayed below.
