Skip to content

Commit 2756cdd

Browse files
committed
docs: move cli into dedicated file
1 parent 55cb4c0 commit 2756cdd

File tree

3 files changed

+60
-84
lines changed

3 files changed

+60
-84
lines changed

README.md

Lines changed: 1 addition & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -6,98 +6,16 @@
66

77
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.
88

9-
## Install
9+
## Quickstart
1010

1111
``` sh
1212
npm install -g @vue/cli
1313
# or
1414
yarn global add @vue/cli
15-
```
16-
17-
## Usage
18-
19-
### Creating a New Project
2015

21-
``` sh
2216
vue create my-project
2317
```
2418

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-
10119
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).
10220

10321
## Contributing

docs/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ npm install -g @vue/cli
3939
vue create my-project
4040
```
4141

42-
For full details on what the `vue` command can do, see the [full CLI docs](https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli/README.md).
42+
For full details on what the `vue` command can do, see the [full CLI docs](./cli.md).
4343

4444
## CLI Service
4545

docs/cli.md

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
## CLI Usage
2+
3+
### Creating a New Project
4+
5+
``` sh
6+
vue create my-project
7+
```
8+
9+
<p align="center">
10+
<img width="682px" src="https://raw.githubusercontent.com/vuejs/vue-cli/dev/docs/screenshot.png">
11+
</p>
12+
13+
### Zero-config Prototyping
14+
15+
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:
16+
17+
``` sh
18+
yarn global add @vue/cli-service-global
19+
echo '<template><h1>Hello!</h1></template>' > App.vue
20+
vue serve
21+
```
22+
23+
`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.
24+
25+
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.
26+
27+
### Installing Plugins in an Existing Project
28+
29+
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:
30+
31+
``` sh
32+
yarn add @vue/cli-plugin-eslint
33+
```
34+
35+
Then you can invoke the plugin's generator so it generates files into your project:
36+
37+
``` sh
38+
# the @vue/cli-plugin- prefix can be omitted
39+
vue invoke eslint
40+
```
41+
42+
In addition, you can pass options to the plugin:
43+
44+
``` sh
45+
vue invoke eslint --config airbnb --lintOn save
46+
```
47+
48+
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.
49+
50+
### Pulling `[email protected]` Templates (Legacy)
51+
52+
`@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:
53+
54+
``` sh
55+
yarn global add @vue/cli-init
56+
# vue init now works exactly the same as [email protected]
57+
vue init webpack my-project
58+
```

0 commit comments

Comments
 (0)