如何在 SAO 中使用 vue-cli 的模板

EGOIST4
1,593 阅读1分钟
SAO 是一个 Yeoman + Vue-cli 结合而来的项目，理由很简单，是想要兼顾 Yeoman 的强大和 Vue-cli 的易用。虽然并不兼容 vue-cli，但是配置不需要修改太多就能使用。

用 Vue 官方的 webpack 模板做例子，我们唯一需要更改的是 meta.js，并且把它改名为 sao.js 即可。

首先这个 webpack 模板使用的是 handlebars 模板外加一个自定义的 if_or 以及 vue-cli 自带的 if_eq unless_eq helpers:

// meta.js
helpers: {
  "if_or": function (v1, v2, options) {
    if (v1 || v2) {
      return options.fn(this);
    }
    return options.inverse(this);
  }
}

SAO 支持几乎所有模板引擎，默认是用的是 ejs，想要使用 handlebars 只需要安装 jstransformer-handlebars 并在 sao.js 中设置一下:

$ yarn add jstransformer-handlebars

然后添加这些 helper:

// sao.js
module.exports = {
  template: 'handlebars',
  // 模板引擎参数
  templateOptions: {
    helpers: {
      if_or(v1, v2, options) {
        if (v1 || v2) {
          return options.fn(this)
        }
        return options.inverse(this)
      },
      if_eq(a, b, opts) {
        return a === b
          ? opts.fn(this)
          : opts.inverse(this)
      },
      unless_eq(a, b, opts) {
        return a === b
          ? opts.inverse(this)
          : opts.fn(this)
      }
    }
  }
}

然后是 prompts 和 filters 这两个配置，你无需更改，它们在 SAO 中的用法几乎一样。

最后是 meta.js 中的 completeMessage：

// meta.js
"completeMessage": "To get started:\n\n  cd {{destDirName}}\n  npm install\n  npm run dev\n\nDocumentation can be found at https://vuejs-templates.github.io/webpack"

在 SAO 中对应的是 post 方法，他让你在运行结束后执行自定义的函数，虽然像 vue-cli 这样直接用字符串替换相应的变量有其方便之处，不过我还是觉得可读性不太好。

// sao.js
module.exports = {
  post({log, folderName, isNewFolder, chalk}) {
    log.success(`Your new Vue project has been successfully generated in ${chalk.underline(folderName)}!`)
    console.log(chalk.bold(`  To get started:\n`))
    if (isNewFolder) console.log(`  cd ${folderName}`)
    console.log(`  yarn`)
    console.log(`  yarn dev\n`)
    console.log(chalk.bold(`  To build for production:\n`))
    console.log(`  yarn build\n`)
  }
}

最后在本地测试一下这个模板:

sao ../path/to/template hello-vue

预览:

当你把模板以 template-vue-webpack 这样的名字发布到 npm 之后就可以用 sao vue-webpack 在本地使用，当然如果只是上传到了 github 也可以用命令 sao user/template-vue-webpack 来使用。

---

在 SAO 的 prompts 配置中还有 role 和 store 这两个参数，比如

module.exports = {
  prompts: {
    name: {
      message: 'Project name',
      role: 'folder:name'
    },
    username: {
      message: 'Your GitHub Username?',
      role: 'git:name',
      store: true
    }
  }
}

使用 role 的作用是给它设置默认值，比如 role: 'folder:name' 就是设置为目标文件夹的名称。而 store 就是存储用户输入的内容以便下次将其作为默认值。

SAO 还有很多功能，有兴趣的自己去 SAO 看看吧 :D

相关链接:

avatar
文章
阅读
粉丝