|
3 | 3 | - [Installation](#installation)
|
4 | 4 | - [Usage](#usage)
|
5 | 5 | - [Creating a New Project](#creating-a-new-project)
|
| 6 | +- [Presets](#presets) |
6 | 7 | - [Zero-config Prototyping](#zero-config-prototyping)
|
7 | 8 | - [Installing Plugins in an Existing Project](#installing-plugins-in-an-existing-project)
|
8 | 9 | - [Inspecting the webpack Config](#inspecting-the-projects-webpack-config)
|
@@ -59,9 +60,61 @@ vue create my-project
|
59 | 60 | <img width="682px" src="https://raw.githubusercontent.com/vuejs/vue-cli/dev/docs/screenshot.png">
|
60 | 61 | </p>
|
61 | 62 |
|
62 |
| -#### Presets |
| 63 | +### Presets |
63 | 64 |
|
64 |
| -After you've selected features, you can optionally save it as a preset so that you can reuse it for future projects. If you want to delete a saved preset, you can do that by editing `~/.vuerc`. |
| 65 | +After you've selected features, you can optionally save it as a preset so that you can reuse it for future projects. If you want to delete or tweak a saved preset, you can do that by editing `~/.vuerc`. |
| 66 | + |
| 67 | +A preset is defined in JSON. If you have saved a preset via the command line and then open `~/.vuerc`, you will find something like the following: |
| 68 | + |
| 69 | +``` json |
| 70 | +{ |
| 71 | + "useConfigFiles": true, |
| 72 | + "router": true, |
| 73 | + "vuex": true, |
| 74 | + "cssPreprocessor": "sass", |
| 75 | + "plugins": { |
| 76 | + "@vue/cli-plugin-babel": {}, |
| 77 | + "@vue/cli-plugin-eslint": { |
| 78 | + "config": "airbnb", |
| 79 | + "lintOn": ["save", "commit"] |
| 80 | + } |
| 81 | + } |
| 82 | +} |
| 83 | +``` |
| 84 | + |
| 85 | +The preset data is used by plugin generators to generate corresponding project files. In addition to the above fields, you can also add additional configuration for integrated tools: |
| 86 | + |
| 87 | + |
| 88 | +``` js |
| 89 | +{ |
| 90 | + "useConfigFiles": true, |
| 91 | + "plugins": {...}, |
| 92 | + "configs": { |
| 93 | + "vue": {...}, |
| 94 | + "postcss": {...}, |
| 95 | + "eslintConfig": {...}, |
| 96 | + "jest": {...} |
| 97 | + } |
| 98 | +} |
| 99 | +``` |
| 100 | + |
| 101 | +These additional configurations will be merged into `package.json` or corresponding config files, depending on the value of `useConfigFiles`. For example, with `"useConfigFiles": true`, the value of `configs.vue` will be merged into `vue.config.js`. |
| 102 | + |
| 103 | +#### Remote Presets |
| 104 | + |
| 105 | +You can share a preset with other developers by publishing it in a git repo. The repo should contain a `preset.json` file containing the preset data. You can then use the `--preset` option to use the remote preset when creating a project: |
| 106 | + |
| 107 | +``` sh |
| 108 | +# use preset from GitHub repo |
| 109 | +vue create --preset username/repo my-project |
| 110 | +``` |
| 111 | + |
| 112 | +GitLab and BitBucket are also supported. Make sure to use the `--clone` option if fetching from private repos: |
| 113 | + |
| 114 | +``` sh |
| 115 | +vue create --preset gitlab:username/repo --clone my-project |
| 116 | +vue create --preset bitbucket:username/repo --clone my-project |
| 117 | +``` |
65 | 118 |
|
66 | 119 | ### Zero-config Prototyping
|
67 | 120 |
|
|
0 commit comments