应用扩展提示引导 API

此页面介绍如何在 src/prompts.js 文件中处理用户在安装扩展时的提示和引导。并不是所有的扩展都需要一个提示引导，这是一个可选项。

用户回答的答案会存放在项目根目录中的 /quasar.extensions.json 文件中，若非实际需要，否则不应该被篡改它。

src/prompts.js 文件的基本结构示例:

// For @quasar/app-vite 1.6+ and @quasar/app-webpack v3.11+
//   1. 它可以是异步函数
//   2. 它有一个 "api" 参数
export default function (api) {
  return [
    // 问题
  ]
}

您可以在 Install， Index 和 Uninstall 中通过 api.prompts 访问到问题的答案。

现在让我们集中讨论定义问题的返回数组的结构。下面的部分提供了最常用的问题类型的示例。

问题格式

WARNING

下面的示例并不是完整的 API 列表，更多信息请参考 Inquirer.js （Quasar CLI 在底层所使用的库）

String

{
  // "description" will be the variable
  // storing the answer
  name: 'description'
  type: 'input',
  required: false, // optional
  message: 'Project description',
  default: 'A Quasar Framework app', // optional
}

{
  name: 'source_build',
  type: 'input',
  required: true, // optional
  message:
    'If you want a separate file to be the source image during production, please specify it here: ',
  validate: (input) => {
    // ...do something ...
  },
  default: (answers) => {
    return answers.source_dev || defaultImg
  }
}

Confirm

{
  // "featureX" will be the variable
  // storing the answer
  name: 'featureX',
  type: 'confirm',
  message: 'Use Feature X?',
  default: true // optional
}

List of choices

{
  // "iconSet" will be the variable
  // storing the answer
  name: 'iconSet',
  type: 'list',
  message: 'Choose Icon Set',
  choices: [
    {
      name: 'Material Icons (recommended)',
      value: 'material-icons', // value of the answer variable
      short: 'Material Icons' // Short name displayed after user picks this
    },
    {
      name: 'Fontawesome v6',
      value: 'fontawesome-v6', // value of the answer variable
      short: 'Fontawesome v6' // Short name displayed after user picks this
    }
    // ... all other choices
  ]
}

API 参数
@quasar/app-vite 1.6+

@quasar/app-webpack 3.11+

COMPATIBILITY WARNING

api 参数只在 @quasar/app-vite v1.6+ 和 @quasar/app-webpack v3.11+ 中可用。

较老的 CLI 版本中并不提供任何参数

api.engine

包含所使用的 Quasar CLI 引擎名（字符串），实例：@quasar/app-vite 或 @quasar/app-webpack。

api.hasVite

布尔值 - 是否运行在 @quasar/app-vite 上。

api.hasWebpack

布尔值 - 是否运行在 @quasar/app-webpack 上。

api.extId

包含应用扩展的 ext-id (字符串)。

api.resolve

解析运行此扩展的 app 的路径。消除了导入 path 并自行解析路径的需求。

// 解析到应用程序的根目录
api.resolve.app('src/my-file.js')

// 解析到应用程序/src目录
api.resolve.src('my-file.js')

// 解析到应用程序/public目录
// (@quasar/app-webpack v3.4+ 或 @quasar/app-vite v1+)
api.resolve.public('my-image.png')

// 解析到应用程序/src-pwa目录
api.resolve.pwa('some-file.js')

// 解析到应用程序/src-ssr目录
api.resolve.ssr('some-file.js')

// 解析到应用程序/src-cordova目录
api.resolve.cordova('config.xml')

// 解析到应用程序/src-electron目录
api.resolve.electron('some-file.js')

// 解析到应用程序/src-bex目录
api.resolve.bex('some-file.js')

api.appDir

包含运行扩展的 app 的完整根目录路径（字符串）。

api.hasTypescript

/**
 * @return {Promise<boolean>} 宿主项目是否启用 TypeScript
 */
await api.hasTypescript()

api.hasLint

/**
 * @return {Promise<boolean>} 宿主项目是否启用 ESLint
 */
await api.hasLint()

api.getStorePackageName

/**
 * @return {Promise<string|undefined>} 'pinia' | 'vuex' | undefined
 */
await api.getStorePackageName()

api.getNodePackagerName

/**
 * @return {Promise<string|undefined>} 'npm' | 'yarn' | 'pnpm'
 */
await api.getNodePackagerName()

api.compatibleWith

通过 semver 条件确保扩展与宿主应用程序中安装的程序包兼容。

如果不满足semver条件，则 Quasar CLI 会出错并停止执行。

semver 条件示例： '1.x || >=2.5.0 || 5.0.0 - 7.2.3'.

/**
 * @param {string} packageName
 * @param {string} semverCondition
 */
api.compatibleWith(packageName, '1.x')

// 一个更复杂的例子：
if (api.hasVite === true) {
  api.compatibleWith('@quasar/app-vite', '^1.0.0-beta.0')
}
else {
  api.compatbileWith('@quasar/app-webpack', '^3.4.0')
}

api.hasPackage

检查宿主应用是否安装了某个包，并且可以通过 semver 条件设置版本。