Skip to content

Latest commit

 

History

History
164 lines (109 loc) · 5.52 KB

cli.md

File metadata and controls

164 lines (109 loc) · 5.52 KB

CLI

Installation

npm install -g @vue/cli
vue create my-project

Usage

Usage: vue <command> [options]

Commands:

  create [options] <app-name>      create a new project powered by vue-cli-service
  invoke <plugin> [pluginOptions]  invoke the generator of a plugin in an already created project
  inspect [options] [paths...]     inspect the webpack config in a project with vue-cli-service
  serve [options] [entry]          serve a .js or .vue file in development mode with zero config
  build [options] [entry]          build a .js or .vue file in production mode with zero config
  init <template> <app-name>       generate a project from a remote template (legacy API, requires @vue/cli-init)

For each command, you can also use vue <command> --help to see more detailed usage.

Creating a New Project

Usage: create [options] <app-name>

create a new project powered by vue-cli-service


Options:

  -p, --preset <presetName>       Skip prompts and use saved preset
  -d, --default                   Skip prompts and use default preset
  -i, --inlinePreset <json>       Skip prompts and use inline JSON string as preset
  -m, --packageManager <command>  Use specified npm client when installing dependencies
  -r, --registry <url>            Use specified npm registry when installing dependencies (only for npm)
  -f, --force                     Overwrite target directory if it exists
  -h, --help                      output usage information

vue create my-project

Presets

After you've selected features, you can optionally save it as a preset so that you can reuse it for future projects. If you want to delete a saved preset, you can do that by editing ~/.vuerc.

Zero-config Prototyping

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 first:

npm install -g @vue/cli-service-global

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.

vue serve

Usage: serve [options] [entry]

serve a .js or .vue file in development mode with zero config


Options:

  -o, --open  Open browser
  -h, --help  output usage information

All you need is a *.vue file:

echo '<template><h1>Hello!</h1></template>' > App.vue
vue serve

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. You can also explicitly specify the entry file:

vue serve MyComponent.vue

If needed, you can also provide an index.html, package.json, install and use local dependencies, or even configure babel, postcss & eslint with corresponding config files.

vue build

Usage: build [options] [entry]

build a .js or .vue file in production mode with zero config


Options:

  -t, --target <target>  Build target (app | lib | wc | wc-async, default: app)
  -n, --name <name>      name for lib or web-component (default: entry filename)
  -d, --dest <dir>       output directory (default: dist)
  -h, --help             output usage information

You can also build the target file into a production bundle for deployment with vue build:

vue build MyComponent.vue

vue build also provides the ability to build the component as a library or a web component. See Build Targets for more details.

Installing Plugins in an Existing Project

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:

npm install -D @vue/cli-plugin-eslint

Then you can invoke the plugin's generator so it generates files into your project:

# the @vue/cli-plugin- prefix can be omitted
vue invoke eslint

In addition, you can pass options to the plugin:

vue invoke eslint --config airbnb --lintOn save

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.

Inspecting the Project's Webpack Config

You can use vue inspect to inspect the webpack config inside a Vue CLI project. See Inspecting Webpack Config for more details.

Pulling [email protected] Templates (Legacy)

@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:

npm install -g @vue/cli-init
# vue init now works exactly the same as [email protected]
vue init webpack my-project