UniApp搭建项目模板（一）—— 目的、选型、定义目录结构

UniApp 简介

uni-app 官网 (opens new window)
国人开发、跨端、庞大的社区、多段编译等等，将原生、小程序、web 等平台统一为一套代码，理想状态下能将原本三个人的工作量减到一个人，实现提效。当然在应用性能上跟原生开发有一些差异，但是需要建立在性能与开发效率等方面进行综合考虑，最终决定是否需要使用跨端技术开发应用。

为什么要封装项目模板

1. 统一管理。由同一模板生成的项目，熟悉成本更低。
2. 功能复用。开发一次，可以应用与多个业务项目。
3. 快速迭代。减少基础项目框架搭建时间，待团队成员熟悉项目工具后，可快速完成项目的搭建开发。

UI 框架

UView 2.0 (opens new window)
Uni 插件市场 (opens new window)中下载量排名前三的 UI 库

项目目录结构

基础文件夹目录结构如下，其他请参考工程目录 (opens new window)

-- src
  -- apis // 接口目录
  -- components // 公用UI组件
    // 文件夹示例
    -- layout
      -- nav-layout // 带导航的布局
    -- form
      -- normal-form.vue // 基础新增form组件
      -- **-form.vue // 其他特殊form组件
    -- table
      -- normal-table.vue // 基础table组件
      -- **-table.vue // 其他类型的table组件
  -- constant // 存放常量
  -- nativeplugins // native插件
  -- pages // 页面
    // 例子
    -- demo // 我的
      -- index.vue // 首页相关
      -- **.vue // 单文件
  -- static // 静态资源
    -- images // 会默认打包进所有端
    -- oss // 会在编译时上传至oss 并且编译的结果会自动将本地路径换成云端路径
      -- images //需要上传的oss的图片资源
  -- store // vuex
  -- unimodules // hbuilderX插件导入
  -- utils // 公用函数
-- webpack // 自定义插件/loader目录
-- vue.config.js // 项目配置