当前位置：首页 > news >正文

10.9 鸿蒙创建和运行项目

news 2025/10/14 7:05:05

创建和运行项目

1.1 新建项目

双击桌面上的图标，启动DevEco Studio
首次打开会出现下面的弹窗，保持默认选项
保持默认勾选，单击"Agree"(同意)按钮

![[ab25fa47-f5c4-4c28-8260-037cf52a0cd3.png]]

单击【Create Project】(创建项目)

![[b7e26e30-4a5a-44cc-98a0-1b28964ce94c.png]]

选择【Empty Ability】(空应用)，之后单击【Next】

![[23a3e491-5805-4c86-9b56-560e4d5634d8.png]]

如果不是首次打开DevEco Studio, 则【文件】【新建】【新建项目】

![[dfd3333c-ae07-477c-97e5-5993159354c0.png]]

项目名称一定要以字母开头,包含字母、数字、下划线

保存的地址路径中不能出现中文，最后字母，可以结合数字，下划线

![[fe38d54d-87c7-47a6-8bb2-f6ed3d117d1b.png]]

保存的路径问题【error】

【pro是项目所在文件夹，需要在添加一个项目的文件夹名称】

![[431eae56-1685-41a2-9fdc-40ee1da6785d.png]]

保存的路径问题【error】

【保存位置只能包含字母、数字、句点（.）、下划线（_）、连字符（-）、冒号（:）和反斜杠（\）】

![[8d65ed3a-4749-4dc4-b85f-037612595018.png]]

单击【Finish】按钮后，项目创建成功

![[8aea1feb-201e-4605-b39f-da9468425feb.png]]

![[3fb2022a-ab41-4704-9be4-b09133e63b97.png]]

![[7d4a2960-1799-44f6-bc36-ea89290ddbc6.png]]

1.2 启用中文化插件

【File】【Settings…】

![[06388b6e-ac3c-4bd4-a7d4-05c538c6e244.png]]

【Plugins】【Installed】

单击"Enable"启用中文化插件，之后单击"Apply"应用， "ok"关闭窗口

![[d21d2081-7c7c-49d7-be5f-62535201d7ed.png]]

单击【Restart】重启，

![[e6bcdfc7-88ee-4a15-afd0-a6ce6a9b6530.png]]

1.3 打开入口文件

【项目目录】【entry】【src】【main】【ets】【pages】【Index.ets】

@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {// 相对布局RelativeContainer() {Text(this.message).id('HelloWorld').fontSize(50).fontWeight(FontWeight.Bold).alignRules({center: { anchor: '__container__', align: VerticalAlign.Center },middle: { anchor: '__container__', align: HorizontalAlign.Center }})}.height('100%').width('100%')}
}

1.4 在预览器中预览

确认Index.ets是当前文件
单击右侧标签【预览器】

![[233a2105-f71b-4d1d-8f7e-b5f252c777d0.png]]

![[14e93375-0ef0-4b06-b6de-c53f401cfa58.png]]

1.5 预览器配置

![[23968f51-e579-42d8-8678-53336c92f8da.png]]

1.6 设置代码换行

【文件】【设置】【编辑器】【常规】

需要手动添加文件的后缀名

![[05a0bfca-fcf3-48be-ac9f-249cb69e1b6c.png]]

1.7 设置VSCode风格的快捷键

【文件菜单】【设置】

![[e7729a95-9fd2-4847-b24d-0049a6e877b0.png]]

安装插件【VSCode Keymap】

![[4f7458ec-c8f6-41fe-b17b-ce851f46aa0a.png]]

选择VSCode风格的快捷键

![[20181ff6-5552-4a93-8a62-411ca741b265.png]]

如果初始化项目报错

错误类型：

在创建项目时报以下错误，或者在创建项目时无反应

![[df196571-0a54-415a-bd6b-13ad49ecc5bb.png]]

解决方案

修改idea.properties文件即可

![[29b9057d-ec8c-4a10-935a-5f33b659b408.jpg]]

理解入口文件基础代码

！！！！注意：

以下概念不需要现在完全明白，只要会用，随着知识体系的深入，就会深刻理解

以@开头的标识符为装饰器，标识不同的功能
@Entry 标识当前文件为入口文件，只能有一个入口文件
@Component标识当前文件是一个组件
struct （结构）定义组件的结构 Index为组件名
@State 定义组件的状态，当状态改变时，会触发视图更新
build(){} 构建组件， build内部只能有一个唯一的根组件

// 以@开头的标识符为装饰器，标识不同的功能
// @Entry 标识当前文件为入口文件，只能有一个入口文件
@Entry
// @Component标识当前文件是一个组件
@Component
// struct（结构）定义组件的结构 Index为组件名
struct Index {// @State 定义组件的状态【数据】，当状态改变时，会触发视图更新@State message: string = 'Hello World';// build(){} 构建组件，  build内部只能有一个唯一的根组件build() {// 是一种布局模式【相对布局】RelativeContainer() {// 文本组件，用于在页面中添加文本内容Text(this.message)// 组件标识.id('HelloWorld')// 从资源文件（resources/base/element/float.json 中）动态获取字体大小，支持多语言、多设备适配// 字体大小，可以写具体的数值，比如30，注意这里的尺寸没有单位【px】.fontSize($r('app.float.page_text_font_size'))// ctrl + 鼠标点击，可以查看FontWeight的所有参数值.fontWeight(FontWeight.Bold)// 对齐方式的规则.alignRules({// anchor 锚点center: { anchor: '__container__', align: VerticalAlign.Center },middle: { anchor: '__container__', align: HorizontalAlign.Center }})// 点击事件.onClick(() => {// 组件本身this.message = 'Welcome';})}.height('100%').width('100%')}
}