MPVue-WeUI安装与使用指南

---

1. 项目目录结构及介绍

MPVue-WeUI 是基于 Vue.js 的小程序开发框架 MPVue 和腾讯的 WeUI 设计规范结合的一个项目模版。它旨在简化微信小程序开发流程，提供一套统一的 UI 解决方案。

.
├── src                 # 主要源代码目录
│   ├── api              # 网络请求接口封装
│   ├── assets           # 静态资源文件，如图片、图标等
│   ├── components       # 公共组件存放目录
│   ├── pages            # 页面组件目录，每个 .vue 文件对应小程序的一个页面
│   ├── store            # Vuex 状态管理
│   └── utils            # 工具函数集合
├── dist                # 编译后的输出目录（运行npm run build之后生成）
├── node_modules        # 第三方依赖库
├── package.json        # 项目配置文件
├── README.md           # 项目说明文档
├── babel.config.js     # Babel 配置文件
├── mpvue.config.js     # MPVue 特定的配置文件
├── postcss.config.js   # PostCSS 配置文件
└── weui.min.css        # 引入的WeUI样式文件

项目结构清晰地划分了不同功能区域，便于开发者快速理解和介入开发。

---

2. 项目的启动文件介绍

项目的核心启动逻辑主要在 package.json 文件中定义的脚本命令。特别是：

• npm run serve: 这是开发阶段常用的命令，它会启动一个本地服务器进行热重载，允许开发者实时查看修改效果。

• npm run build: 用于编译项目到微信小程序可直接使用的 .wxapkg 包，适合部署到生产环境。

启动过程涉及的主要文件还包括 mpvue.config.js，它提供了对编译流程的一些自定义配置，比如路径别名、编译选项等。

---

3. 项目的配置文件介绍

mpvue.config.js

此文件是 MPVue 特有的配置文件，负责控制项目的构建行为。示例中的关键配置可能包括入口文件、编译选项、是否启用生产模式等。例如：

module.exports = {
    // 入口文件
    entry: './src/main.js',
    // 小程序版本号
    appPlusVersion: '1.0.1',
    // 是否开启H5页面的自动编译
    h5AutoCompile: true,
    // 更多自定义配置...
};

package.json

虽然不是特定于MPVue的配置，但通过这个文件，你可以定义项目的基础信息、脚本命令、依赖版本等。这对于项目的日常开发、测试以及发布流程至关重要。

其他配置文件

• babel.config.js 控制Babel转码规则，可以添加插件或更改预设以适应项目需求。
• postcss.config.js 中设置PostCSS插件，通常用于自动化处理CSS，如自动添加浏览器前缀。

通过上述配置和文件结构的了解，开发者可以更高效地使用 MPVue-WeUI 框架进行小程序开发。