本章主要讲解项目环境的基础配置和使用工具，在此基础上分析工程代码目录结构，延展讲解完成项目开发的准备工作。
# 项目准备
一，项目初始阶段
- 一个项目的开始，会有业务需求，就是为什么要有这个项目，这个项目要实现什么目的，解决什么问题（这些是项目发起人，产品定位者思考的）；
- 项目发起后，产品经理会根据项目特点，市场分析，竞品分析，目标人群等给出项目的实际蓝图（原型），就是互联网产品的定型，项目的雏形；
- 根据原型，UI 完成对原型的扩展，用户的操作习惯，视觉感官，画面感等进行进一步的完善，也就是我们所说的设计稿，前后端人员准备技术选型，语言，框架，或者是数据库的选择。只有适合团队的架构才能更好的打磨一个项目；
- 技术选型完，前后端之间会讨论数据交互的问题，当前基本都是前后分离的架构，讨论更多的是基于 HTTP 协议的接口，约定数据结构，然后同时开发，按照项目进度进行联调，提测，交付，不断的循环这套流程，已达成一个个"里程碑"；
二，项目开发阶段
- 前端人员在在需求评审，协商接口文档后，就可以开始搭建项目工程了（不要马上 coding，我们应该是对项目的 PRD 做分析，细化抽离，这块我在之后会详细探讨）；
- 前端拿到接口文档，并不是直接对接开发，而是模拟准备数据，很多情况下后端人员只是约束了 api 类型，方法等，并没有实际部署，所以需要自己模拟接口，在这里我们使用了某易云音乐的 api，这样也更接近实际的项目开发，让学习者有更直观的感受；
- 模拟接口完成必要的交互才会有实际性的联调，如果感兴趣的小伙伴可以选择简单的 easyMock，当然还有其他一些工具 swagger 等，根据团队情况而定，完成数据模拟。
三，项目框架的选型
- 框架选型是项目打造与项目定位的一部分，产品需要 app，h5，小程序来扩大市场，但是要基于团队的情况，衡量开发成本，开发时间，兼顾各个问题，兼顾各个端；
- 市面上有很多大团队贡献的框架或库，但是如果项目有大量定制化的功能，那么这个框架或库可能比不是你想要的，如果你要简易多端走，那么这就是你的菜；
- 以下是一些可以帮助您更好地比较这些框架的问题：
- 是否足以构建可扩展的应用程序，解决项目需求？
- 是否很容易为每个框架找到开发人员？
- 是否有持续的维护和反馈？
- 是否有稳定的社区？
- 是否了解框架的性能，速度和学习曲线？
- 在以往的经历中，我分别使用过小程序原生，mpvue，taro 和 Uniapp 来开发，即使不跨端，Uniapp 也能给我更好的开发体验，毕竟原生小程序开发并没有那么友好。
# 实战从 0 到 1
从这节开始主要会围绕几个页面来分析讲解实战开发的内容，通过实际的开发来引用 Uniapp 框架的组件，api 等，这样能充分深入了解 Uniapp 框架，也可以了解如何搭建一个项目。如果你想更好把控框架与前端项目架构，那就往下看吧。
以上图为例，一开始就要确定好 tabbar 底部导航对应的几个入口页面，再把页面分成轮播图，分类，推荐歌单等模块，对于通用的模块功能可以封装成自定义组件。
开始我们新建一个 Uniapp 项目，【选择新建项目】 >> 【uni-app】 >> 【默认模板】 >> 【创建】；（关于如何新建项目可以查看基础一的解说介绍）
Uniapp 延伸扩展了小程序中的导航条、选项卡，通过配置文件生成，配置后由原生组件进行渲染， Uniapp 在 H5 中同样兼容这些配置，不过会降级通过 div 的标签组件实现，因此开发者无需单独为 H5 平台添加导航条或选项卡，从而实现一次开发，跨端运行。
# 目录结构介绍
新建项目后，项目目录手动调整为（目录结构为大多数团队开发基本约定）：
|-- apis // 所有接口模块
| └─ account.js
|-- common // 公用目录(包含全局样式，全局js等)
| └─ css
| └─ common.scss
| └─ js
| └─ util.js
|-- components // 公用组件目录
| └─ a.vue // 公用的a组件
|-- pages // 业务页面文件存放目录 以入口进行文件夹分类
| └─ index // index页面主体文件夹
| | └─ index.vue // 页面
| └─ account // account页面主体文件夹
| | └─ account.vue // 页面
| └─ subpages // 业务页面 分包
| └─ acount
| └─ acount.vue
|-- static // 存放应用引用静态资源（如图片、视频等）的地方，注意：静态资源只能存放于此
| └─ image
|-- store // 状态管理
| └─ index.js
|-- untils // 管理工具
| └─ request // 请求封装
|-- main.js // 初始化入口文件
|-- App.vue // 应用配置，用来配置App全局样式以及监听
|-- manifest.json // 配置应用名称、appid、logo、版本等打包信息
|-- pages.json // 配置页面路由、导航条、选项卡等页面类信息
上面的配置文件是固定，不建议随意修改，可能会引起未知编译问题，Uniapp 在处理文件的时候做了规范处理，所谓入乡随俗，使用它的框架就需要遵循它的使用规范。
这边要特别说明一点，由于小程序有分包机制优化，因此我们的 pages 是以分包来对页面进行分块的，以主页面的五个入口，分包的形式来管理页面。上面是 Uniapp 项目的基础目录使用，当然每个人可以根据习惯爱好，自定义一个目录。更重要的是遵循一定的规范，这有助于更好的协同开发。
下面讲解目录的核心内容。
# 加入公用文件
跟平常 h5 项目引入 reset.css 文件对页面样式重置处理一样，在项目开始引入通用的样式文件可以提前对文件全局处理。App.vue 是路由页主入口，在这定义的样式会在所有的组件生效，可以在 <style> 标签定义全局通用样式。为了更好管理全局样式，这里抽离为 common.scss 文件，并把编译语言设为 scss:
