You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+88-10Lines changed: 88 additions & 10 deletions
Original file line number
Diff line number
Diff line change
@@ -4,19 +4,22 @@ A simple CLI for scaffolding Vue.js projects.
4
4
5
5
### Installation
6
6
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/).
8
8
9
9
```bash
10
10
$ npm install -g vue-cli
11
11
```
12
12
13
13
### Usage
14
14
15
+
```bash
16
+
$ vue init <template-name><project-name>
17
+
```
18
+
19
+
Example:
20
+
15
21
```bash
16
22
$ vue init webpack my-project
17
-
$ cd my-project
18
-
$ npm install
19
-
$ npm run dev
20
23
```
21
24
22
25
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/
53
56
54
57
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.
55
58
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
57
68
58
69
- A template repo **must** have a `template` directory that holds the template files.
59
70
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:
61
72
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;
63
74
64
-
While developing your template you can test via `vue-cli` with:
75
+
-`filters`: used to conditional filter files to render.
65
76
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}}
68
130
```
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