|
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 `vue-cli@2.x` Templates (Legacy) |
| 54 | + |
| 55 | +`@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: |
| 56 | + |
| 57 | +``` sh |
| 58 | +yarn global add @vue/cli-init |
| 59 | +# vue init now works exactly the same as vue-cli@2.x |
| 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