zoro-cli/lib/plugins/config-base/prompts.js

https://github.com/vuejs/vue-cli

module.exports = ({
  api,
  rootOptions,
  Types
}) => {
  const {
    mobile,
    pc,
    weblib,
    nodelib,
    node,
    ui
  } = Types;

  const isWeblib = ({
    type
  }) => type === weblib;

  const isWebOrWeblib = ({
    type
  }) => type === mobile || type === pc || type === weblib;

  api.injectTypes([{
    name: 'web mobile 项目',
    value: mobile
  }, {
    name: 'web pc 项目',
    value: pc
  }, {
    name: 'web npm library (rollup)',
    value: weblib
  }, {
    name: 'node npm library',
    value: nodelib
  }, {
    name: 'node 项目 (koa/egg/chair 等)',
    value: node
  }]);
  let defaultUI;

  if (rootOptions.ui === false) {
    defaultUI = false;
  } else {
    defaultUI = isWeblib ? false : ui[0];
  }

  return [{
    type: 'list',
    name: 'ui',
    message: '选择前端框架',
    default: defaultUI,
    when: isWebOrWeblib,
    choices: () => {
      const no = {
        name: '不需要',
        value: false
      };
      return [no, ...ui];
    }
  }, {
    type: 'list',
    name: 'bundler',
    message: '请选择打包工具',
    default: rootOptions.bundler,
    when: isWeblib,
    choices: [{
      value: 'rollup'
    }, {
      value: 'webpack'
    }]
  }, {
    name: 'cssPreprocessor',
    type: 'list',
    message: 'Pick a CSS pre-processor',
    default: rootOptions.cssPreprocessor,
    when: isWebOrWeblib,
    choices: ({
      type
    }) => {
      const no = {
        name: '不需要',
        value: false
      };
      const cssPreprocessors = [{
        name: 'PostCSS',
        value: 'postcss'
      }, {
        name: 'SCSS/SASS',
        value: 'sass'
      }, {
        name: 'LESS',
        value: 'less'
      }, {
        name: 'Stylus',
        value: 'stylus'
      }];
      return isWeblib({
        type
      }) ? [no, ...cssPreprocessors] : cssPreprocessors;
    }
  }, {
    name: 'rem',
    type: 'list',
    message: '是否要开启自动将 px 转 rem 的功能',
    default: !!rootOptions.rem,
    // 只要有 cssPreprocessor, 那么就询问是否需要转 rem
    when: ({
      cssPreprocessor
    }) => !!cssPreprocessor,
    choices: [{
      name: '不开启',
      value: false
    }, {
      name: '开启, 请查阅生成的 postcss.config.js',
      value: true
    }]
  }];
};