|
1 | 1 | # vue-cli [](https://circleci.com/gh/vuejs/vue-cli/tree/dev) [](https://ci.appveyor.com/project/yyx990803/vue-cli-6b0a6/branch/dev)
|
2 | 2 |
|
3 |
| -> WIP: this is the work in progress branch of the upcoming vue-cli 3.0. |
4 |
| -> Only for preview for template maintainers. |
| 3 | +> This is the branch for `@vue/cli` 3.0. |
5 | 4 |
|
6 |
| -## Development Setup |
| 5 | +**Status: alpha** |
7 | 6 |
|
8 |
| -This project uses a monorepo setup that requires using [Yarn](https://yarnpkg.com) because it relies on [Yarn workspaces](https://yarnpkg.com/blog/2017/08/02/introducing-workspaces/). |
| 7 | +## Install |
9 | 8 |
|
10 | 9 | ``` sh
|
11 |
| -# install dependencies |
12 |
| -yarn |
13 |
| - |
14 |
| -# link `vue` executable |
15 |
| -# if you have the old vue-cli installed globally, you may |
16 |
| -# need to uninstall it first. |
17 |
| -cd packages/@vue/cli |
18 |
| -yarn link |
19 |
| - |
20 |
| -# create test projects in /packages/test |
21 |
| -cd - |
22 |
| -cd packages/test |
23 |
| -vue create test-app |
24 |
| -cd test-app |
25 |
| -yarn serve |
| 10 | +npm install -g @vue/cli |
| 11 | +# or |
| 12 | +yarn global add @vue/cli |
26 | 13 | ```
|
27 | 14 |
|
28 |
| -### Testing Tips |
| 15 | +## Usage |
29 | 16 |
|
30 |
| -The full test suite is rather slow, because it has a number of e2e tests that perform full webpack builds of actual projects. To narrow down the tests needed to run during development, you can pass a list of packages to the `test` script: |
| 17 | +#### Creating a New Project |
31 | 18 |
|
32 | 19 | ``` sh
|
33 |
| -yarn test cli cli-services |
| 20 | +vue create my-project |
34 | 21 | ```
|
35 | 22 |
|
36 |
| -If the package is a plugin, you can ommit the `cli-plugin-` prefix: |
| 23 | +#### Zero-config Prototyping |
| 24 | + |
| 25 | +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: |
| 26 | + |
| 27 | +``` sh |
| 28 | +yarn global add @vue/cli-service-global |
| 29 | +echo '<template><h1>Hello!</h1></template>' > App.vue |
| 30 | +vue serve |
| 31 | +``` |
| 32 | + |
| 33 | +`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. |
| 34 | + |
| 35 | +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. |
| 36 | + |
| 37 | +#### Installing Plugins in an Existing Project |
| 38 | + |
| 39 | +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: |
37 | 40 |
|
38 | 41 | ``` sh
|
39 |
| -yarn test typescript |
| 42 | +yarn add @vue/cli-plugin-eslint |
40 | 43 | ```
|
41 | 44 |
|
42 |
| -To further narrow down tests, you can also specify your own regex: |
| 45 | +Then you can invoke the plugin's generator so it generates files into your project: |
43 | 46 |
|
44 | 47 | ``` sh
|
45 |
| -yarn test -g <filenameRegex> |
| 48 | +vue invoke eslint # the prefix can be omitted |
46 | 49 | ```
|
47 | 50 |
|
48 |
| -You can also pass `--watch` to run tests in watch mode. |
| 51 | +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. |
| 52 | + |
| 53 | +#### Pulling `[email protected]` Templates (Legacy) |
| 54 | + |
| 55 | +`@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: |
| 56 | + |
| 57 | +``` sh |
| 58 | +yarn global add @vue/cli-init |
| 59 | +# vue init now works exactly the same as [email protected] |
| 60 | +vue init webpack my-project |
| 61 | +``` |
| 62 | + |
| 63 | +#### Customization and Plugin Usage |
| 64 | + |
| 65 | +For a detailed guide on how to customize a project, 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). |
| 66 | + |
| 67 | +## Contributing |
49 | 68 |
|
50 |
| -Note that `jest --onlyChanged` isn't always accurate because some tests spawn child processes. |
| 69 | +Please see [contributing guide](https://github.com/vuejs/vue-cli/blob/dev/.github/CONTRIBUTING.md). |
51 | 70 |
|
52 |
| -### Plugin Development |
| 71 | +## License |
53 | 72 |
|
54 |
| -See [dedicated section in docs](https://github.com/vuejs/vue-cli/tree/dev/docs/Plugin.md). |
| 73 | +MIT |
0 commit comments