微信小程序开发环境搭建：mpvue+mpvue-weui+fly.js完整指南

技术栈概述

本文详细阐述了基于mpvue框架、mpvue-weui UI库以及fly.js网络请求库构建微信小程序的完整流程，供开发者参考。

1. 核心框架选用mpvue。
2. UI组件库采用mpvue-weui。
3. 网络请求模块使用fly.js。

项目初始化配置

1. 项目初始化配置

注意：若本地未安装Node.js环境，需先前往官网下载安装。安装Node.js后，npm包管理器将默认一并安装。

随后进入目标项目目录，打开命令行窗口（便捷操作：在资源管理器中进入该目录，按住Shift键并点击鼠标右键，选择“在此处打开PowerShell窗口”或“在此处打开命令窗口”）。

npm默认从境外服务器下载依赖，速度可能较慢，建议配置国内镜像源以加速下载，具体操作如下。

npm set registry https://registry.npm.taobao.org/

执行上述命令后，即成功切换至国内淘宝镜像源进行下载。

npm install -g vue-cli

全局安装vue-cli，这是Vue官方的项目脚手架工具。

npm install -g webpack

安装webpack打包管理工具。

npm install -g vue

全局安装Vue框架核心库。

完成上述基础组件安装后，即可开始正式初始化mpvue框架项目。

vue init mpvue/mpvue-quickstart my-project

进入新建的项目文件夹，执行命令安装项目所需的依赖包。

启动项目运行环境。

了解项目运行的底层原理。

项目运行与调试

2. 项目运行与调试

导入项目至微信小程序开发者工具，需前往微信官网下载并安装该开发工具。

成功启动项目运行。

引入mpvue-weui UI库

3. 引入mpvue-weui UI库

接下来执行mpvue-weui的引入操作。

仅需引入weui.css文件即可，无需额外配置其他内容。

mpvue-weui官方文档地址 https://kuangpf.com/mpvue-weui/#/

随后新建一个测试页面，用于验证weui组件的使用效果。

需特别注意代码中的标点符号规范，否则可能导致编译报错。

新增页面后必须重新执行npm run dev命令，否则系统无法识别新页面（终止运行的快捷键为ctrl+c）。

重新运行项目后。

成功进入test页面，证明页面跳转功能正常。

引用weui的grid网格组件作为示例展示。

最终显示效果。

该功能界面的代码可直接从上述网站复制，也可通过Git克隆mpvue-weui项目仓库，其中包含更多详细代码供直接复用。

引入fly.js网络请求库

4. 引入fly.js网络请求库

接下来处理request请求部分，fly.js同样被推荐，具体使用方法如下。

通过npm命令安装fly.js库。

npm install flyio

具体调用方法。

以上即为本文的全部内容，希望对各位的学习有所帮助，也欢迎大家继续支持本站。