Saturday, 4 January, 2020 UTC
Summary
The idea behind a CLI (Command Line Interface) is to use simple, editable commands in order to produce a greater output. The Vue CLI is no different. When a new project begins, the last thing a developer should worry about is project scaffolding. Luckily, the Vue team has bundled scaffolding, prototyping, and a variety of other handy commands into one easy CLI tool!
Installing Whether npm or yarn is your preferred package manager, the Vue CLI installation process is simple as can be.
#npm option $ npm install -g @vue/cli #yarn option $ yarn global add @vue/cli Confirm that this has been installed correctly by opening up a fresh terminal and using the vue command.
The CLI is installed globally in order to be used for multiple projects.
This affiliate banner helps support the site 🙏
Instant prototyping is one of the core features of the Vue CLI, allowing developers to quickly write a .vue or .js file and preview their work without needing to configure other build tools such as webpack and babel.
In order to use this feature, you must first install an additional add-on.
# npm option $ npm install -g @vue/cli-service-global # yarn option $ yarn global add @vue/cli-service-global Once complete, you can write out your component file, navigate to its directory and run
vue serve {YOUR_FILE_NAME} to instantly preview.Additional flags you can pass to
vue serve include:- -o –open opens your default browser to the port of the development server
- -c –copy copies the URL of the dev server to your clipboard
- -p –port takes a single argument port to specify the dev server port, defaults to 8080
One of the main benefits of the Vue CLI is that it handles project setup and scaffolding for you, eliminating the need to worry about folder structure.
Running the below will begin the setup process for a new project:
$ vue create my-new-project You will then be shown a series of prompts, allowing you to pick your preferred features for this project. These features include:
- Babel
- TypeScript
- PWA Support
- Vue Router
- Vuex
- CSS Pre-processors
- Linter/Formatter
- Unit Testing
- End to End Testing
This is followed by a few more questions about preferences (depending on what you previously chose):
- Class style component syntax
- Use Babel with TypeScript
- Router History Mode
- SASS, LESS, or Stylus
- ESLint configuration
- Unit & E2E testing solution
- Dedicated config files or in
package.json - Preferred package manager
After all of this, you can also choose to save these settings as a preset, allowing you to skip these questions in future projects.
Prefer a UI to a CLI? Run
Plugins vue ui to launch a GUI process.While most plugins will be automatically taken care of by the scaffolding process, you may find midway through a project that you want to add another. Using
vue add, you can easily inject a new plugin into an existing project.Can’t find what you need? Try browsing this list of available plugins!
Config Reference In addition to the settings mentioned above, the CLI also provides an optional config file,
vue.config.js. This file can be used to adjust options within the CLI as well as the internal webpack settings.This file must be at the top-level of your project, next to package.json
Some of the more important config options:
- publicPath: The URL at which your app will ultimately be deployed. The default value is
'/', so if your domain ismy-domain.com, this would deploy tomy-domain.com/. This is useful if your app is not the top-level domain, but on a sub-path instead. - outputDir: The directory in which build files will be generated. By default this is
dist - assetsDir: Where your static assets are located. This is relative to the
outputDirfolder - pages: Vue apps do not have to be *SPAs* (single page applications). This mode will generate pages for each entry point specified. This should be an object containing each page, with each having a unique
entry. You can also providetemplate, filename, title, chunkoptions as well, but they are not required.
Here’s a simple example of what a
vue.config.js file can look like:module.exports = { outputDir: 'public', // ...more options } You can find a reference for all the available options here.
There are a large variety of additional options that can be passed to this configuration option. Please feel free to view the Official Documentation for more information!