uniapp 项目创建与目录结构

基本介绍

uniapp 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

具有 vue 和微信小程序的开发经验，可快速上手 uniapp。相对于开发者来说，减少了学习成本，因为学会 uniapp 后，即可开发出 iOS、Android、H5，以及各种小程序的应用，不需要再去学习开发其他应用的框架，相对公司而言，也大大减少了开发成本。

环境搭建

安装编辑器 HBuilderX，https://www.dcloud.io/hbuilderx.html

HBuilderX是通用的前端开发工具，但为uniapp做了特别强化。根据自己电脑，自行下载即可。

项目搭建

也可以通过命令行创建项目，此处省略，可以参考官方文档学习。

项目运行

你可以选择运行到各个平台，请自行尝试

注意：

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

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

2、开启端口

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

目录结构

这里介绍常用的开发目录

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

参考文档：https://uniapp.dcloud.io/quickstart-hx.html