Skip to content

Commit 0e4d142

Browse files
committed
update readme
1 parent 9c183b4 commit 0e4d142

File tree

1 file changed

+88
-10
lines changed

1 file changed

+88
-10
lines changed

README.md

Lines changed: 88 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,22 @@ A simple CLI for scaffolding Vue.js projects.
44

55
### Installation
66

7-
Prerequisites: [Node.js](https://nodejs.org/en/) and [Git](https://git-scm.com/).
7+
Prerequisites: [Node.js](https://nodejs.org/en/) (>5.x preferred) and [Git](https://git-scm.com/).
88

99
``` bash
1010
$ npm install -g vue-cli
1111
```
1212

1313
### Usage
1414

15+
``` bash
16+
$ vue init <template-name> <project-name>
17+
```
18+
19+
Example:
20+
1521
``` bash
1622
$ vue init webpack my-project
17-
$ cd my-project
18-
$ npm install
19-
$ npm run dev
2023
```
2124

2225
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/`.
@@ -53,16 +56,91 @@ The shorthand repo notation is passed to [download-git-repo](https://github.com/
5356

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

56-
You can also create your own template from scratch:
59+
### Local Templates
60+
61+
Instead of a GitHub repo, you can also use a template on your local file system:
62+
63+
``` bash
64+
vue init ~/fs/path/to-custom-template my-project
65+
```
66+
67+
### Writing Custom Templates from Scratch
5768

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

60-
- All template files will be piped through Handlebars for simple templating - `vue-cli` will automatically infer the prompts based on `{{}}` interpolations found in the files.
71+
- A template repo **may** have a `meta.json` file that provides metadata for the template. The `meta.json` can contain the following fields:
6172

62-
- A template repo **may** have a `meta.json` file that provides a schema for the prompts. The schema will be passed to [inquirer](https://github.com/SBoudrias/Inquirer.js). See [example](https://github.com/vuejs-templates/webpack/blob/master/meta.json). We support `string`, `boolean` and `checkbox` (for multi choice) types.
73+
- `prompts`: used to collect user options data;
6374

64-
While developing your template you can test via `vue-cli` with:
75+
- `filters`: used to conditional filter files to render.
6576

66-
``` bash
67-
vue init ~/fs/path/to-custom-template my-project
77+
- `completeMessage`: the message to be displayed to the user when the template has been generated. You can include custom instruction here.
78+
79+
#### prompts
80+
81+
The `prompts` field in `meta.json` 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:
82+
83+
``` json
84+
{
85+
"prompts": {
86+
"name": {
87+
"type": "string",
88+
"required": true,
89+
"message": "Project name"
90+
}
91+
}
92+
}
93+
```
94+
95+
After all prompts are finished, all files inside `template` will be rendered using [Handlebars](http://handlebarsjs.com/), with the prompt results as the data.
96+
97+
##### Conditional Prompts
98+
99+
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:
100+
101+
``` json
102+
{
103+
"prompts": {
104+
"lint": {
105+
"type": "confirm",
106+
"message": "Use a linter?"
107+
},
108+
"lintConfig": {
109+
"when": "lint",
110+
"type": "list",
111+
"message": "Pick a lint config",
112+
"choices": [
113+
"standard",
114+
"airbnb",
115+
"none"
116+
]
117+
}
118+
}
119+
}
120+
```
121+
122+
The prompt for `lintConfig` will only be triggered when the user answered yes to the `lint` prompt.
123+
124+
##### Pre-registered Handlebars Helpers
125+
126+
Two commonly used Handlebars helpers, `if_eq` and `unless_eq` are pre-registered:
127+
128+
``` handlebars
129+
{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
68130
```
131+
132+
#### File filters
133+
134+
The `filters` field in `meta.json` 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:
135+
136+
``` json
137+
{
138+
"filters": {
139+
"test/**/*": "needTests"
140+
}
141+
}
142+
```
143+
144+
Files under `test` will only be generated if the user answered yes to the prompt for `needTests`.
145+
146+
Note that the `dot` option for minimatch is set to `true` so glob patterns would also match dotfiles by default.

0 commit comments

Comments
 (0)