目录

前言

大家好，我们又见面了，我是夜阑的狗，本文是【微信小程序开发教程】专栏的第49篇文章。

今天是学习微信小程序的第31天，踏上新的旅程，记录最美好的瞬间，每天进步一点点。

专栏地址：【微信小程序开发教程】，本专栏是对《我是夜阑的狗》微信小程序开发流程的一个总结，希望可以加深自己的印象，同时也能帮助到其他朋友。

如果文章中有需要改进的地方，请随时告诉我。

1.新建uni-app项目

前面我们已经介绍了uni-app工具的下载安装过程，以及如何配置开发环境，还学习了如何安装sass插件。接下来我们来讲解一下uni-app项目的创建以及目录结构。废话不多说，我们继续原帖，继续上一次的讲解。

打开工具，这里的版本是3.7.3，找到左上角的选项，文件->新建->项目：

填写项目基本信息，选择uni-app项目 --> 填写完项目名和路径后 --> 选择uni-app项目模板（这里也可以选择默认项目） --> 这里的vue版本是最新版本 --> 可以选择是否上传到代码托管平台 --> 点击创建就完成了。（由于这里使用的是最新版本，所以创建过程会和网上一些老版本不一样）

项目创建成功后就可以看到项目的目录结构了，接下来我们来简单了解一下各个结构的作用。

2.目录结构

前面创建了一个uni-app项目，默认包含以下目录和文件，下面是一些简单的结构：

┌─pages 业务页面文件存放的目录 │ ├─index │ │ └─index.vue index页面 │ └─list │ └─list.vue list页面 ├─static 存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此 ├─uni_modules uni内置模块 ├─main.js Vue初始化入口文件 ├─App.vue 应用配置，用来配置小程序的全局样式、生命周期函数等 ├─manifest.json 配置应用名称、appid、logo、版本等打包信息 └─pages.json 配置页面路径、页面窗口样式、tabBar、navigationBar 等页面类信息

3.运行项目到微信开发者工具1.配置

在实际开发过程中，可以将创建的项目运行在指定的开发者工具上，如果要在微信开发者工具上运行项目，需要在项目中的.json文件中配置环境，找到微信小程序配置，填入自己的微信小程序：

2.配置安装路径

在中配置“微信开发者工具”的安装路径，操作步骤为：工具-->设置-->运行配置-->小程序运行配置，微信开发者工具路径。

3.配置服务端口

在微信开发者工具中，进入设置->安全设置面板，开启微信开发者工具的服务端口：

4.运行项目

在菜单栏中点击 运行->运行到小程序模拟器->微信开发者工具。编译完当前的uni-app项目后，会自动运行到微信开发者工具中，可以更方便的查看项目效果以及进行调试：

如果第一次运行，可能会缺少很多插件，不过没关系，它们会自动下载并安装。

第一次运行成功后的项目效果（会有警告）：

如果不想看到这个警告，你需要 X 项目中的 App.vue 文件并删除或注释掉 .warn。

当前组件仅支持目录结构，请升级至3.1.0或以上版本！

如果你正在灰度使用基础库，也会报警告，此时打开微信开发者工具，工具栏->详细信息->本地设置，更改基础库版本即可。

【基础库】我们使用的是灰度基础库2.30.3进行调试，如有疑问，请前往工具栏-详情-本地设置更改基础库版本。

总结

感谢观看，以上就是uni-app项目创建及目录结构的介绍，如果觉得有帮助的话，请点赞让更多人看到。