|
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 `vue-cli@2.x` Templates (Legacy) |
67 | | - |
68 | | -`@vue/cli` uses the same `vue` binary, so it overwrites `vue-cli@2.x`. 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 vue-cli@2.x |
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