|
| 1 | +# vue-cli [](https://circleci.com/gh/vuejs/vue-cli) [](https://www.npmjs.com/package/vue-cli) |
| 2 | + |
| 3 | +A simple CLI for scaffolding Vue.js projects. |
| 4 | + |
| 5 | +### Installation |
| 6 | + |
| 7 | +Prerequisites: [Node.js](https://nodejs.org/en/) (>=6.x, 8.x preferred), npm version 3+ and [Git](https://git-scm.com/). |
| 8 | + |
| 9 | +``` bash |
| 10 | +$ npm install -g vue-cli |
| 11 | +``` |
| 12 | + |
| 13 | +### Usage |
| 14 | + |
| 15 | +``` bash |
| 16 | +$ vue init <template-name> <project-name> |
| 17 | +``` |
| 18 | + |
| 19 | +Example: |
| 20 | + |
| 21 | +``` bash |
| 22 | +$ vue init webpack my-project |
| 23 | +``` |
| 24 | + |
| 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/`. |
| 26 | + |
| 27 | +### vue build |
| 28 | + |
| 29 | +Use vue-cli as a zero-configuration development tool for your Vue apps and component, check out the [docs](/docs/build.md). |
| 30 | + |
| 31 | +### Official Templates |
| 32 | + |
| 33 | +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. |
| 34 | + |
| 35 | +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. |
| 36 | + |
| 37 | +Current available templates include: |
| 38 | + |
| 39 | +- [webpack](https://github.com/vuejs-templates/webpack) - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction. |
| 40 | + |
| 41 | +- [webpack-simple](https://github.com/vuejs-templates/webpack-simple) - A simple Webpack + vue-loader setup for quick prototyping. |
| 42 | + |
| 43 | +- [browserify](https://github.com/vuejs-templates/browserify) - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing. |
| 44 | + |
| 45 | +- [browserify-simple](https://github.com/vuejs-templates/browserify-simple) - A simple Browserify + vueify setup for quick prototyping. |
| 46 | + |
| 47 | +- [pwa](https://github.com/vuejs-templates/pwa) - PWA template for vue-cli based on the webpack template |
| 48 | + |
| 49 | +- [simple](https://github.com/vuejs-templates/simple) - The simplest possible Vue setup in a single HTML file |
| 50 | + |
| 51 | +### Custom Templates |
| 52 | + |
| 53 | +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: |
| 54 | + |
| 55 | +``` bash |
| 56 | +vue init username/repo my-project |
| 57 | +``` |
| 58 | + |
| 59 | +Where `username/repo` is the GitHub repo shorthand for your fork. |
| 60 | + |
| 61 | +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. |
| 62 | + |
| 63 | +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. |
| 64 | + |
| 65 | +### Local Templates |
| 66 | + |
| 67 | +Instead of a GitHub repo, you can also use a template on your local file system: |
| 68 | + |
| 69 | +``` bash |
| 70 | +vue init ~/fs/path/to-custom-template my-project |
| 71 | +``` |
| 72 | + |
| 73 | +### Writing Custom Templates from Scratch |
| 74 | + |
| 75 | +- A template repo **must** have a `template` directory that holds the template files. |
| 76 | + |
| 77 | +- 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: |
| 78 | + |
| 79 | + - `prompts`: used to collect user options data; |
| 80 | + |
| 81 | + - `filters`: used to conditional filter files to render. |
| 82 | + |
| 83 | + - `metalsmith`: used to add custom metalsmith plugins in the chain. |
| 84 | + |
| 85 | + - `completeMessage`: the message to be displayed to the user when the template has been generated. You can include custom instruction here. |
| 86 | + |
| 87 | + - `complete`: Instead of using `completeMessage`, you can use a function to run stuffs when the template has been generated. |
| 88 | + |
| 89 | +#### prompts |
| 90 | + |
| 91 | +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: |
| 92 | + |
| 93 | +``` json |
| 94 | +{ |
| 95 | + "prompts": { |
| 96 | + "name": { |
| 97 | + "type": "string", |
| 98 | + "required": true, |
| 99 | + "message": "Project name" |
| 100 | + } |
| 101 | + } |
| 102 | +} |
| 103 | +``` |
| 104 | + |
| 105 | +After all prompts are finished, all files inside `template` will be rendered using [Handlebars](http://handlebarsjs.com/), with the prompt results as the data. |
| 106 | + |
| 107 | +##### Conditional Prompts |
| 108 | + |
| 109 | +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: |
| 110 | + |
| 111 | +``` json |
| 112 | +{ |
| 113 | + "prompts": { |
| 114 | + "lint": { |
| 115 | + "type": "confirm", |
| 116 | + "message": "Use a linter?" |
| 117 | + }, |
| 118 | + "lintConfig": { |
| 119 | + "when": "lint", |
| 120 | + "type": "list", |
| 121 | + "message": "Pick a lint config", |
| 122 | + "choices": [ |
| 123 | + "standard", |
| 124 | + "airbnb", |
| 125 | + "none" |
| 126 | + ] |
| 127 | + } |
| 128 | + } |
| 129 | +} |
| 130 | +``` |
| 131 | + |
| 132 | +The prompt for `lintConfig` will only be triggered when the user answered yes to the `lint` prompt. |
| 133 | + |
| 134 | +##### Pre-registered Handlebars Helpers |
| 135 | + |
| 136 | +Two commonly used Handlebars helpers, `if_eq` and `unless_eq` are pre-registered: |
| 137 | + |
| 138 | +``` handlebars |
| 139 | +{{#if_eq lintConfig "airbnb"}};{{/if_eq}} |
| 140 | +``` |
| 141 | + |
| 142 | +##### Custom Handlebars Helpers |
| 143 | + |
| 144 | +You may want to register additional Handlebars helpers using the `helpers` property in the metadata file. The object key is the helper name: |
| 145 | + |
| 146 | +``` js |
| 147 | +module.exports = { |
| 148 | + helpers: { |
| 149 | + lowercase: str => str.toLowerCase() |
| 150 | + } |
| 151 | +} |
| 152 | +``` |
| 153 | + |
| 154 | +Upon registration, they can be used as follows: |
| 155 | + |
| 156 | +``` handlebars |
| 157 | +{{ lowercase name }} |
| 158 | +``` |
| 159 | + |
| 160 | +#### File filters |
| 161 | + |
| 162 | +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: |
| 163 | + |
| 164 | +``` json |
| 165 | +{ |
| 166 | + "filters": { |
| 167 | + "test/**/*": "needTests" |
| 168 | + } |
| 169 | +} |
| 170 | +``` |
| 171 | + |
| 172 | +Files under `test` will only be generated if the user answered yes to the prompt for `needTests`. |
| 173 | + |
| 174 | +Note that the `dot` option for minimatch is set to `true` so glob patterns would also match dotfiles by default. |
| 175 | + |
| 176 | +#### Skip rendering |
| 177 | + |
| 178 | +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: |
| 179 | + |
| 180 | +``` json |
| 181 | +{ |
| 182 | + "skipInterpolation": "src/**/*.vue" |
| 183 | +} |
| 184 | +``` |
| 185 | + |
| 186 | +#### Metalsmith |
| 187 | + |
| 188 | +`vue-cli` uses [metalsmith](https://github.com/segmentio/metalsmith) to generate the project. |
| 189 | + |
| 190 | +You may customize the metalsmith builder created by vue-cli to register custom plugins. |
| 191 | + |
| 192 | +```js |
| 193 | +{ |
| 194 | + "metalsmith": function (metalsmith, opts, helpers) { |
| 195 | + function customMetalsmithPlugin (files, metalsmith, done) { |
| 196 | + // Implement something really custom here. |
| 197 | + done(null, files) |
| 198 | + } |
| 199 | + |
| 200 | + metalsmith.use(customMetalsmithPlugin) |
| 201 | + } |
| 202 | +} |
| 203 | +``` |
| 204 | + |
| 205 | +If you need to hook metalsmith before questions are asked, you may use an object with `before` key. |
| 206 | + |
| 207 | +```js |
| 208 | +{ |
| 209 | + "metalsmith": { |
| 210 | + before: function (metalsmith, opts, helpers) {}, |
| 211 | + after: function (metalsmith, opts, helpers) {} |
| 212 | + } |
| 213 | +} |
| 214 | +``` |
| 215 | + |
| 216 | +#### Additional data available in meta.{js,json} |
| 217 | + |
| 218 | +- `destDirName` - destination directory name |
| 219 | + |
| 220 | +```json |
| 221 | +{ |
| 222 | + "completeMessage": "To get started:\n\n cd {{destDirName}}\n npm install\n npm run dev" |
| 223 | +} |
| 224 | +``` |
| 225 | + |
| 226 | +- `inPlace` - generating template into current directory |
| 227 | + |
| 228 | +```json |
| 229 | +{ |
| 230 | + "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}}" |
| 231 | +} |
| 232 | +``` |
| 233 | + |
| 234 | +### `complete` function |
| 235 | + |
| 236 | +Arguments: |
| 237 | + |
| 238 | +- `data`: the same data you can access in `completeMessage`: |
| 239 | + ```js |
| 240 | + { |
| 241 | + complete (data) { |
| 242 | + if (!data.inPlace) { |
| 243 | + console.log(`cd ${data.destDirName}`) |
| 244 | + } |
| 245 | + } |
| 246 | + } |
| 247 | + ``` |
| 248 | + |
| 249 | +- `helpers`: some helpers you can use to log results. |
| 250 | + - `chalk`: the `chalk` module |
| 251 | + - `logger`: [the built-in vue-cli logger](/lib/logger.js) |
| 252 | + - `files`: An array of generated files |
| 253 | + ```js |
| 254 | + { |
| 255 | + complete (data, {logger, chalk}) { |
| 256 | + if (!data.inPlace) { |
| 257 | + logger.log(`cd ${chalk.yellow(data.destDirName)}`) |
| 258 | + } |
| 259 | + } |
| 260 | + } |
| 261 | + ``` |
| 262 | + |
| 263 | +### Installing a specific template version |
| 264 | + |
| 265 | +`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 (`#`). |
| 266 | + |
| 267 | +The format needed for a specific official template is: |
| 268 | + |
| 269 | +``` |
| 270 | +vue init '<template-name>#<branch-name>' <project-name> |
| 271 | +``` |
| 272 | + |
| 273 | +Example: |
| 274 | + |
| 275 | +Installing the [`1.0` branch](https://github.com/vuejs-templates/webpack-simple/tree/1.0) of the webpack-simple vue template: |
| 276 | + |
| 277 | +``` |
| 278 | +vue init 'webpack-simple#1.0' mynewproject |
| 279 | +``` |
| 280 | + |
| 281 | +_Note_: The surrounding quotes are necessary on zsh shells because of the special meaning of the `#` character. |
| 282 | + |
| 283 | + |
| 284 | +### License |
| 285 | + |
| 286 | +[MIT](http://opensource.org/licenses/MIT) |
0 commit comments