# ppd-build

> A Simple Generator For Vue.js projects.

Latest version **1.1.1** (published 2017-10-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install ppd-build
pnpm add ppd-build
yarn add ppd-build
bun add ppd-build
```

Provides the commands `ppd`, `ppd-init`, `ppd-list`, `ppd-love`, `ppd-build`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2017-10-23 |
| First published | 2017-10-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=4.0.0 |
| Dependencies | 42 |
| Known vulnerabilities | 0 (+6 in 5 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | IT ZOU |
| Maintainers | itzou |
| Keywords | vue, cli, spa |

## Links

- npm: https://www.npmjs.com/package/ppd-build
- Repository: https://github.com/zj0715zh/vue-build
- Homepage: https://github.com/zj0715zh/vue-build#readme
- Issues: https://github.com/zj0715zh/vue-build/issues
- npm.io page: https://npm.io/package/ppd-build

## Dependencies (42)

- [opn](https://npm.io/package/opn.md) ^4.0.2
- [ora](https://npm.io/package/ora.md) ^0.2.1
- [vue](https://npm.io/package/vue.md) ^2.1.10
- [async](https://npm.io/package/async.md) ^2.0.0-rc.2
- [chalk](https://npm.io/package/chalk.md) ^1.1.1
- [rimraf](https://npm.io/package/rimraf.md) ^2.5.0
- [semver](https://npm.io/package/semver.md) ^5.1.0
- [express](https://npm.io/package/express.md) ^4.14.0
- [request](https://npm.io/package/request.md) ^2.67.0
- [tildify](https://npm.io/package/tildify.md) ^1.2.0
- [webpack](https://npm.io/package/webpack.md) ^2.2.0
- [inquirer](https://npm.io/package/inquirer.md) ^0.12.0
- [commander](https://npm.io/package/commander.md) ^2.9.0
- [minimatch](https://npm.io/package/minimatch.md) ^3.0.0
- [user-home](https://npm.io/package/user-home.md) ^2.0.0
- [babel-core](https://npm.io/package/babel-core.md) ^6.21.0
- [css-loader](https://npm.io/package/css-loader.md) ^0.26.1
- [handlebars](https://npm.io/package/handlebars.md) ^4.0.5
- [metalsmith](https://npm.io/package/metalsmith.md) ^2.1.0
- [multimatch](https://npm.io/package/multimatch.md) ^2.1.0
- [url-loader](https://npm.io/package/url-loader.md) ^0.5.7
- [vue-loader](https://npm.io/package/vue-loader.md) ^10.0.2
- [consolidate](https://npm.io/package/consolidate.md) ^0.14.0
- [file-loader](https://npm.io/package/file-loader.md) ^0.9.0
- [autoprefixer](https://npm.io/package/autoprefixer.md) ^6.6.1
- [babel-loader](https://npm.io/package/babel-loader.md) ^6.2.10
- [read-metadata](https://npm.io/package/read-metadata.md) ^1.0.0
- [webpack-merge](https://npm.io/package/webpack-merge.md) ^2.3.1
- [postcss-loader](https://npm.io/package/postcss-loader.md) ^1.2.1
- [download-git-repo](https://npm.io/package/download-git-repo.md) ^0.2.1
- [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) ^2.26.0
- [babel-preset-vue-app](https://npm.io/package/babel-preset-vue-app.md) ^0.4.0
- [http-proxy-middleware](https://npm.io/package/http-proxy-middleware.md) ^0.17.3
- [vue-template-compiler](https://npm.io/package/vue-template-compiler.md) ^2.1.10
- [webpack-dev-middleware](https://npm.io/package/webpack-dev-middleware.md) ^1.9.0
- [webpack-hot-middleware](https://npm.io/package/webpack-hot-middleware.md) ^2.15.0
- [validate-npm-package-name](https://npm.io/package/validate-npm-package-name.md) ^2.2.2
- [installed-by-yarn-globally](https://npm.io/package/installed-by-yarn-globally.md) ^0.1.1
- [extract-text-webpack-plugin](https://npm.io/package/extract-text-webpack-plugin.md) 2.0.0-beta.5
- [post-compile-webpack-plugin](https://npm.io/package/post-compile-webpack-plugin.md) ^0.1.0
- [connect-history-api-fallback](https://npm.io/package/connect-history-api-fallback.md) ^1.3.0
- [friendly-errors-webpack-plugin](https://npm.io/package/friendly-errors-webpack-plugin.md) ^1.1.2

## Alternatives

- [@salesforce/cli](https://npm.io/package/@salesforce/cli.md) — 389.7K weekly downloads
- [@mintlify/cli](https://npm.io/package/@mintlify/cli.md) — 208.9K weekly downloads
- [@grafana/e2e-selectors](https://npm.io/package/@grafana/e2e-selectors.md) — 128.7K weekly downloads
- [mintlify](https://npm.io/package/mintlify.md) — 112.0K weekly downloads
- [@intlayer/cli](https://npm.io/package/@intlayer/cli.md) — 22.8K weekly downloads

## Recent versions

- 1.1.1 (latest) — 2017-10-23
- 1.1.0 — 2017-10-16
- 1.0.5 — 2017-10-13
- 1.0.4 — 2017-10-13
- 1.0.3 — 2017-10-13
- 1.0.1 — 2017-10-13
- 1.0.0 — 2017-10-13

## README

# vue-cli [![Build Status](https://img.shields.io/circleci/project/vuejs/vue-cli/master.svg)](https://circleci.com/gh/vuejs/vue-cli) [![npm package](https://img.shields.io/npm/v/vue-cli.svg)](https://www.npmjs.com/package/vue-cli)

A simple CLI for scaffolding Vue.js projects.

### Installation

Prerequisites: [Node.js](https://nodejs.org/en/) (>=4.x, 6.x preferred) and [Git](https://git-scm.com/).

``` bash
$ npm install -g vue-cli
```

### Usage

``` bash
$ vue init <template-name> <project-name>
```

Example:

``` bash
$ vue init webpack my-project
```

The above command pulls the template from [vuejs-templates/webpack](https://github.com/vuejs-templates/webpack), prompts for some information, and generates the project at `./my-project/`.

### vue build

Use vue-cli as a zero-configuration development tool for your Vue apps and component, check out the [docs](/docs/build.md).

### Official Templates

The purpose of official Vue project templates are to provide opinionated, battery-included development tooling setups so that users can get started with actual app code as fast as possible. However, these templates are un-opinionated in terms of how you structure your app code and what libraries you use in addition to Vue.js.

All official project templates are repos in the [vuejs-templates organization](https://github.com/vuejs-templates). When a new template is added to the organization, you will be able to run `vue init <template-name> <project-name>` to use that template. You can also run `vue list` to see all available official templates.

Current available templates include:

- [webpack](https://github.com/vuejs-templates/webpack) - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.

- [webpack-simple](https://github.com/vuejs-templates/webpack-simple) - A simple Webpack + vue-loader setup for quick prototyping.

- [browserify](https://github.com/vuejs-templates/browserify) - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.

- [browserify-simple](https://github.com/vuejs-templates/browserify-simple) - A simple Browserify + vueify setup for quick prototyping.

- [simple](https://github.com/vuejs-templates/simple) - The simplest possible Vue setup in a single HTML file

### Custom Templates

It's unlikely to make everyone happy with the official templates. You can simply fork an official template and then use it via `vue-cli` with:

``` bash
vue init username/repo my-project
```

Where `username/repo` is the GitHub repo shorthand for your fork.

The shorthand repo notation is passed to [download-git-repo](https://github.com/flipxfx/download-git-repo) so you can also use things like `bitbucket:username/repo` for a Bitbucket repo and `username/repo#branch` for tags or branches.

If you would like to download from a private repository use the `--clone` flag and the cli will use `git clone` so your SSH keys are used.

### Local Templates

Instead of a GitHub repo, you can also use a template on your local file system:

``` bash
vue init ~/fs/path/to-custom-template my-project
```

### Writing Custom Templates from Scratch

- A template repo **must** have a `template` directory that holds the template files.

- A template repo **may** have a metadata file for the template which can be either a `meta.js` or `meta.json` file. It can contain the following fields:

  - `prompts`: used to collect user options data;

  - `filters`: used to conditional filter files to render.

  - `completeMessage`: the message to be displayed to the user when the template has been generated. You can include custom instruction here.

#### prompts

The `prompts` field in the metadata file should be an object hash containing prompts for the user. For each entry, the key is the variable name and the value is an [Inquirer.js question object](https://github.com/SBoudrias/Inquirer.js/#question). Example:

``` json
{
  "prompts": {
    "name": {
      "type": "string",
      "required": true,
      "message": "Project name"
    }
  }
}
```

After all prompts are finished, all files inside `template` will be rendered using [Handlebars](http://handlebarsjs.com/), with the prompt results as the data.

##### Conditional Prompts

A prompt can be made conditional by adding a `when` field, which should be a JavaScript expression evaluated with data collected from previous prompts. For example:

``` json
{
  "prompts": {
    "lint": {
      "type": "confirm",
      "message": "Use a linter?"
    },
    "lintConfig": {
      "when": "lint",
      "type": "list",
      "message": "Pick a lint config",
      "choices": [
        "standard",
        "airbnb",
        "none"
      ]
    }
  }
}
```

The prompt for `lintConfig` will only be triggered when the user answered yes to the `lint` prompt.

##### Pre-registered Handlebars Helpers

Two commonly used Handlebars helpers, `if_eq` and `unless_eq` are pre-registered:

``` handlebars
{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
```

##### Custom Handlebars Helpers

You may want to register additional Handlebars helpers using the `helpers` property in the metadata file. The object key is the helper name:

``` js
module.exports = {
  helpers: {
    lowercase: str => str.toLowerCase()
  }
}
```

Upon registration, they can be used as follows:

``` handlebars
{{ lowercase name }}
```

#### File filters

The `filters` field in the metadata file should be an object hash containing file filtering rules. For each entry, the key is a [minimatch glob pattern](https://github.com/isaacs/minimatch) and the value is a JavaScript expression evaluated in the context of prompt answers data. Example:

``` json
{
  "filters": {
    "test/**/*": "needTests"
  }
}
```

Files under `test` will only be generated if the user answered yes to the prompt for `needTests`.

Note that the `dot` option for minimatch is set to `true` so glob patterns would also match dotfiles by default.

#### Skip rendering

The `skipInterpolation` field in the metadata file should be a [minimatch glob pattern](https://github.com/isaacs/minimatch). The files matched should skip rendering. Example:

``` json
{
  "skipInterpolation": "src/**/*.vue"
}
```

#### Additional data available in meta.{js,json}

- `destDirName` - destination directory name

```json
{
  "completeMessage": "To get started:\n\n  cd {{destDirName}}\n  npm install\n  npm run dev"
}
```

- `inPlace` - generating template into current directory

```json
{
  "completeMessage": "{{#inPlace}}To get started:\n\n  npm install\n  npm run dev.{{else}}To get started:\n\n  cd {{destDirName}}\n  npm install\n  npm run dev.{{/inPlace}}"
}
```

### Installing a specific template version

`vue-cli` uses the tool [`download-git-repo`](https://github.com/flipxfx/download-git-repo) to download the official templates used. The `download-git-repo` tool allows you to indicate a specific branch for a given repository by providing the desired branch name after a pound sign (`#`).

The format needed for a specific official template is:

```
vue init '<template-name>#<branch-name>' <project-name>
```

Example:

Installing the [`1.0` branch](https://github.com/vuejs-templates/webpack-simple/tree/1.0) of the webpack-simple vue template:

```
vue init 'webpack-simple#1.0' mynewproject
```

_Note_: The surrounding quotes are necessary on zsh shells because of the special meaning of the `#` character.


### License

[MIT](http://opensource.org/licenses/MIT)

---
_Source: https://npm.io/package/ppd-build · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._