Mpx 框架

外观

脚手架工具 ​

Mpx 提供了一个基于 @vue/cli 的脚手架工具 @mpxjs/cli，用于快速初始化和管理 Mpx 项目。它继承了 Vue CLI 的强大功能，如零配置原型开发、插件系统、图形化界面等，并针对小程序开发进行了深度定制。

安装 ​

请确保你的环境中有 Node.js (>= 10)。

bash
# 全局安装 @mpxjs/cli
npm install -g @mpxjs/cli

初始化项目 ​

使用 create 命令创建一个新项目：

bash
mpx create my-project

在创建过程中，CLI 会通过交互式问答引导你配置项目：

  1. 项目描述/作者：基础元信息。
  2. 跨平台支持：选择是否需要支持 支付宝/百度/头条/QQ 等小程序平台，以及 Web 和 React Native 平台。
  3. TypeScript：是否使用 TypeScript 进行开发。
  4. CSS 预处理器：选择 Stylus, Less 或 Sass。
  5. Linter / Formatter：选择 ESLint 配置。
  6. 测试支持：是否需要单元测试 (Jest) 或 E2E 测试。
  7. 云开发：是否使用微信云开发。

初始化完成后，进入项目目录并安装依赖：

bash
cd my-project
npm install

常用命令 ​

开发模式 ​

启动开发服务器，监听文件变化并自动重新构建：

bash
npm run serve

默认情况下，构建产物会输出到 dist/wx 目录（以微信小程序为例）。你可以使用微信开发者工具打开该目录进行预览和调试。

如果你需要调试其他平台，可以使用对应的 script，例如：

bash
npm run serve:ali  # 支付宝小程序
npm run serve:swan # 百度小程序
npm run serve:tt   # 字节跳动小程序
npm run serve:web  # Web 平台

生产构建 ​

构建用于生产环境的代码（压缩、混淆、去除冗余代码等）：

bash
npm run build

同样支持不同平台的构建命令：

bash
npm run build:ali
npm run build:web
# ...

审查项目配置 ​

查看项目最终生成的 webpack 配置：

bash
npm run inspect

配置文件 ​

由于 @mpxjs/cli 是基于 Vue CLI 的，项目的主要配置文件为根目录下的 vue.config.js。你可以在这里配置 webpack、Mpx 插件选项等。

示例配置 ​

javascript
// vue.config.js
module.exports = {
  outputDir: `dist/${process.env.MPX_CURRENT_TARGET_MODE || 'wx'}`,
  pluginOptions: {
    mpx: {
      // Mpx 插件配置
      srcMode: 'wx', // 源码模式，默认为 wx
      plugin: {
        // mpx-webpack-plugin 配置
        hackResolve: true
      },
      loader: {
        // mpx-loader 配置
      }
    }
  },
  configureWebpack: {
    // 自定义 webpack 配置
    resolve: {
      alias: {
        '@': 'src'
      }
    }
  }
}

插件系统 ​

@mpxjs/cli 使用了 Vue CLI 的插件架构。这意味着你可以使用现有的 Vue CLI 插件，也可以使用 Mpx 专属插件。

在项目初始化时选择的特性（如 TypeScript、Transpilation 等）都是以插件的形式注入到项目中的。

更多关于插件开发的文档，请参考 Vue CLI 插件开发指南。

旧版迁移 ​

如果你之前使用的是 mpx init (基于 mpx-cli 2.x 或更早版本)，建议升级到新的 @mpxjs/cli。

  1. 卸载旧版：npm uninstall -g mpx-cli
  2. 安装新版：npm install -g @mpxjs/cli
  3. 新版使用 mpx create 代替 mpx init。

参考文档 ​