uni-app - 通用项目框架搭建及项目结构调整-CFANZ编程社区

官网介绍：

uni-app开发规范

为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范：

页面文件遵循 Vue 单文件组件 (SFC) 规范
组件标签靠近小程序规范，详见uni-app 组件规范
接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范
数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期
为兼容多端运行，建议使用flex布局进行开发

1、项目结构

├── common
│   ├── configs
│   ├── libs
│   ├── style
│   └── utils
├── components
├── dataManager
│   └── userDataManager.js
├── http
│   ├── apiConfig.js
│   └── httpUtils.js
├── hybrid
│   └── html
├── node_modules
│   └── uview-ui
├── pages
│   ├── index
│   ├── login
│   ├── module1
│   ├── module2
│   ├── module3
│   └── module4
├── platforms
│   └── app-plus
├── static
│   ├── fonts
│   ├── images
├── uni_modules
├── unpackage
├── wxcomponents
│   └── vant
├── App.vue
├── main.js
├── manifest.json
├── package-lock.json
├── package.json
├── pages.json
├── uni.scss

2、创建uni-app项目

在点击工具栏里的文件 -> 新建 -> 项目

生成一个包含 uni ui的项目模板，下图是默认的项目结构

然后1、项目结构进行扩充

3、安装uView UI

3.1、安装

进入uView UI 官网>npm安装，按文档操作

// 如果您的项目是HX创建的，根目录又没有package.json文件的话，请先执行如下命令：
// npm init -y

// 安装
npm install uview-ui

// 更新
npm update uview-ui

3.2、npm配置

进入uView UI 官网>npm配置，按文档操作

    "easycom": {
        // npm方式安装的配置
        "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
        // 下载安装方式配置
        // "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue",
    },