|
6 | 6 |
|
7 | 7 | Certain combinations of plugins may not work properly, and things may break until we reach beta phase. Do not use in production yet unless you are adventurous.
|
8 | 8 |
|
9 |
| -## Install |
| 9 | +## Quickstart |
10 | 10 |
|
11 | 11 | ``` sh
|
12 | 12 | npm install -g @vue/cli
|
13 | 13 | # or
|
14 | 14 | yarn global add @vue/cli
|
15 |
| -``` |
16 |
| - |
17 |
| -## Usage |
18 |
| - |
19 |
| -### Creating a New Project |
20 | 15 |
|
21 |
| -``` sh |
22 | 16 | vue create my-project
|
23 | 17 | ```
|
24 | 18 |
|
25 |
| -<p align="center"> |
26 |
| - <img width="682px" src="https://raw.githubusercontent.com/vuejs/vue-cli/dev/docs/screenshot.png"> |
27 |
| -</p> |
28 |
| - |
29 |
| -### Zero-config Prototyping |
30 |
| - |
31 |
| -You can rapidly prototype with just a single `*.vue` file with the `vue serve` and `vue build` commands, but they require an additional global addon to be installed: |
32 |
| - |
33 |
| -``` sh |
34 |
| -yarn global add @vue/cli-service-global |
35 |
| -echo '<template><h1>Hello!</h1></template>' > App.vue |
36 |
| -vue serve |
37 |
| -``` |
38 |
| - |
39 |
| -`vue serve` uses the same default setup (webpack, babel, postcss & eslint) as projects created by `vue create`. It automatically infers the entry file in the current directory - the entry can be one of `main.js`, `index.js`, `App.vue` or `app.vue`. If needed, you can also provide an `index.html`, install and use local dependencies, or even configure babel, postcss & eslint with corresponding config files. |
40 |
| - |
41 |
| -The drawback of `vue serve` is that it relies on globally installed dependencies which may be inconsistent on different machines. Therefore this is only recommended for rapid prototyping. |
42 |
| - |
43 |
| -### Installing Plugins in an Existing Project |
44 |
| - |
45 |
| -Each CLI plugin ships with a generator (which creates files) and a runtime plugin (which tweaks the core webpack config and injects commands). When you use `vue create` to create a new project, some plugins will be pre-installed for you based on your feature selection. In case you want to install a plugin into an already created project, simply install it first: |
46 |
| - |
47 |
| -``` sh |
48 |
| -yarn add @vue/cli-plugin-eslint |
49 |
| -``` |
50 |
| - |
51 |
| -Then you can invoke the plugin's generator so it generates files into your project: |
52 |
| - |
53 |
| -``` sh |
54 |
| -# the @vue/cli-plugin- prefix can be omitted |
55 |
| -vue invoke eslint |
56 |
| -``` |
57 |
| - |
58 |
| -In addition, you can pass options to the plugin: |
59 |
| - |
60 |
| -``` sh |
61 |
| -vue invoke eslint --config airbnb --lintOn save |
62 |
| -``` |
63 |
| - |
64 |
| -It is recommended to commit your project's current state before running `vue invoke`, so that after file generation you can review the changes and revert if needed. |
65 |
| - |
66 |
| -### Pulling `[email protected]` Templates (Legacy) |
67 |
| - |
68 |
| -`@vue/cli` uses the same `vue` binary, so it overwrites `[email protected]`. If you still need the legacy `vue init` functionality, you can install a global bridge: |
69 |
| - |
70 |
| -``` sh |
71 |
| -yarn global add @vue/cli-init |
72 |
| -# vue init now works exactly the same as [email protected] |
73 |
| -vue init webpack my-project |
74 |
| -``` |
75 |
| - |
76 |
| -### Customizing Webpack Config |
77 |
| - |
78 |
| -Create a `vue.config.js` in project root: (**Note:** if you have a `vue` field in your `package.json`, you need to move that here as well) |
79 |
| - |
80 |
| -``` js |
81 |
| -// vue.config.js |
82 |
| -module.exports = { |
83 |
| - chainWebpack: chainableConfig => { |
84 |
| - // modify config with webpack-chain |
85 |
| - // https://github.com/mozilla-neutrino/webpack-chain |
86 |
| - }, |
87 |
| - |
88 |
| - configureWebpack: config => { |
89 |
| - // mutate config directly, or return new config |
90 |
| - }, |
91 |
| - |
92 |
| - // object literal will be merged into base config using webpack-merge |
93 |
| - configureWebpack: { |
94 |
| - // ... |
95 |
| - } |
96 |
| -} |
97 |
| -``` |
98 |
| - |
99 |
| -### Recipes and Plugin Usage |
100 |
| - |
101 | 19 | For a detailed guide with recipes for common tasks, detailed usage for each plugin, please see the [full documentation](https://github.com/vuejs/vue-cli/blob/dev/docs/README.md).
|
102 | 20 |
|
103 | 21 | ## Contributing
|
|
0 commit comments