uniapp 项目创建与目录结构

准备工作

1、打开我们常用的 google 浏览器，访问HBuilder X 的官方下载地址：[HBuilder X软件下载](https://www.dcloud.io/hbuilderx.html)，将进入如下页面

2、根据自己使用的电脑系统选择对应的开发版本，下载对应软件，我这里以 Mac OS 为例，如图所示：

下载完成后，自行安装即可。

我这里下载的是最新版(20211225)的。

创建项目

打开 HBuilder X 软件，找到左上角的文件菜单，选择创建项目，如图所示：

我们选择 uniapp 模式创建新项目，项目名字根据自己的需要来填写，如图所示：

项目运行

当项目创建完成后，点击编辑器左上角 运行 按钮，可以选择性的运行到不同的客户端，比如我这里需要运行到 Chrome 和 微信开发者工具 中。

Chrome 运行结果

微信开发者工具运行结果

注意：如果是第一次运行在微信小程序中，需要做如下设置，不然编译过程会报错

1、配置微信开发者工具的安装路径

2、开启端口

打开微信开发者工具，在左上角菜单栏找到 设置-安全设置，如下图所示开启服务端口

其他的运行模式请自行尝试。

目录结构

这里介绍常用的开发目录

1. pages：当前业务页面文件存放的目录，里面的文件夹是业务对应的各大模块
2. static：静态资源存放的目录，包括图片、css样式
3. unpackage：用于存放项目编译后的文件目录
4. App.vue：项目的全局配置目录
5. index.html ：基础模板入口文件
6. main.js ： 项目的入口文件
7. manifest.json：项目的基础参数配置，比如项目 logo 等
8. pages.json：项目的全局配置文件，比如模块路由、app 基础样式还有底部菜单等