Uniapp：创建项目

Monly212025-04-22 11:18

一、前提准备

首先要创建uniapp项目，需要先下载HBuilderX，HBuilderX是一款开箱即用的工具，下载完毕之后，解压到指定的目录即可使用，需要注意的是最好路径里面不要有中文。

二、创建项目

一个 uni-app 工程，就是一个 Vue 项目，你可以通过 HBuilderX 或 cli 方式快速创建 uni-app 工程，在这里我们推荐使用HBuilderX就行创建。

点击工具栏里的文件 -> 新建 -> 项目（快捷键Ctrl+N）：

输入项目名称，以及项目的存放位置(这里最后路径中也别有中文 )，模版类型我们选择默认模版，如果是开发H5，小程序就不需要勾选uni-app x，只有开发App的时候才勾选，Vue版本根据项目需求进行选择，配置完成之后点击创建即可创建一个uniapp项目。

三、项目结构

html 复制代码

├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源都应存放于此目录
├─unpackage             非工程代码，一般存放运行或发行的编译结果
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─main.js               Vue初始化入口文件
├─manifest.json         配置应用名称、appid、logo、版本等打包信息
├─pages.json            配置页面路由、导航条、选项卡等页面类信息
└─uni.scss              内置的常用样式变量

四、运行测试

点击工具栏里的文件 -> 运行 -> 内置浏览器：