Install Vue Cli Service

Posted on  by admin

Upgrading #

Install Windows Subsystem for Linux (WSL), including a Linux distribution (like Ubuntu) and make sure it is running in WSL 2 mode. You can check this by opening PowerShell and entering: wsl -l -v. Install Node.js on WSL 2: This includes a version manager, package manager, Visual Studio Code, and the Remote Development extension.

The Node Package Manager (npm) is used to install Vue.js. Installing a Linux distribution with WSL will create a directory for storing files: \\wsl\Ubuntu-20.04 (substitute Ubuntu-20.04 with whatever Linux distribution you're using).

To open this directory in Windows File Explorer, open your WSL command line, select your home directory using cd ~, then enter the command explorer.exe .

Be careful not to install or store files that you will be working with on the mounted C drive (/mnt/c/Users/yourname$).

Doing so will significantly slow down your install and build times.

Open a WSL command line (ie. Create a new project folder: mkdir VueProjects and enter that directory: cd VueProjects.

Install Vue.js using Node Package Manager (npm):.

vue-cli-service serve #

To install Vue.js using a CDN, rather than NPM, see the Vue.js install docs.

Microsoft Learn online course: Take your first steps with Vue.js. Try a Vue tutorial with VS Code. Warning regarding Previous Versions. The package name changed from vue-cli to @vue/cli.If you have the previous vue-cli (1.x or 2.x) package installed globally, you need to uninstall it first with npm uninstall vue-cli -g or yarn global remove vue-cli.

Node Version Requirement. Vue CLI requires Node.js version 8.9 or above (8.11.0+ recommended). You can manage multiple versions of Node on the same machine with nvm or nvm-windows.

To install the new package, use one of the following commands. You need administrator privileges to execute these unless npm was installed on your system through a Node.js version manager (e.g.

After installation, you will have access to the vue binary in your command line. You can verify that it is properly installed by simply running vue, which should present you with a help message listing all available commands. You can check you have the right version (3.x) with this command:.

vue-cli-service build #

Warning regarding Previous Versions. The package name changed from vue-cli to @vue/cli. If you have the previous vue-cli (1.x or 2.x) package installed globally, you need to uninstall it first with npm uninstall vue-cli -g or yarn global remove vue-cli.

Node Version Requirement.

  • Vue CLI 4.x requires Node.js version 8.9 or above (v10+ recommended). You can manage multiple versions of Node on the same machine with n, nvm or nvm-windows.

  • To install the new package, use one of the following commands. You need administrator privileges to execute these unless npm was installed on your system through a Node.js version manager (e.g.

  • After installation, you will have access to the vue binary in your command line. You can verify that it is properly installed by simply running vue, which should present you with a help message listing all available commands.

vue-cli-service inspect #

You can check you have the right version with this command:. To upgrade the global Vue CLI package, you need to run:.

Checking All Available Commands #

Upgrade commands shown above apply to the global Vue CLI installation.

To upgrade one or more @vue/cli related packages (including packages starting with @vue/cli-plugin- or vue-cli-plugin-) inside your project, run vue upgrade inside the project directory:.

Skipping Plugins #

You can exclude specific plugins when running a command by passing the name of the plugin to the --skip-plugins option:

TIP

This option is available for everyvue-cli-service command, including custom ones added by other plugins.

You can skip multiple plugins by passing their names as a comma-separated list or by repeating the argument:

Plugin names are resolved the same way they are during install, as described here

Caching and Parallelization #

  • cache-loader is enabled for Vue/Babel/TypeScript compilations by default. Files are cached inside node_modules/.cache - if running into compilation issues, always try deleting the cache directory first.

  • thread-loader will be enabled for Babel/TypeScript transpilation when the machine has more than 1 CPU cores.

Git Hooks #

When installed, @vue/cli-service also installs yorkie, which allows you to easily specify Git hooks using the gitHooks field in your package.json:

WARNING

yorkie is a fork of husky and is not compatible with the latter.

Configuration without Ejecting #

Projects created via vue create are ready to go without the need for additional configuration. The plugins are designed to work with one another so in most cases, all you need to do is pick the features you want during the interactive prompts.

However, we also understand that it's impossible to cater to every possible need, and the needs of a project may also change over time. Projects created by Vue CLI allow you to configure almost every aspect of the tooling without ever needing to eject. Check out the Config Reference for more details.