Vue CLI is a standard tooling baseline for the Vue ecosystem, providing zero-config rapid prototyping and a runtime-driven development experience. `vue-cli-service` is a development dependency in a Vue CLI project, characterized as a runtime dependency for the project. It comes packed into the `@vue/cli-service` and is automatically installed with every new Vue.js project.
To give you a step-by-step guide on how to use `vue-cli-service`, we’ll go through the process of creating a simple Vue.js application using the Vue CLI.
Firstly, let’s discuss installation. If Vue CLI has not already been installed on your machine, you can do so by running this command in your terminal:
npm install -g @vue/cli
Once Vue CLI is installed, you can then create a new Vue.js application using the command below:
vue create my-app
The above command creates a new Vue.js application named `my-app`.
Using Vue-CLI-Service
The `my-app` project includes a `package.json` file. This file contains several scripts which utilize `vue-cli-service`. For instance:
- npm run serve
- npm run build
- npm run lint
Let’s discuss each one:
npm run serve
This command compiles and hot-reloads the application for development. It does this by running the `serve` command of `vue-cli-service`.
"serve": "vue-cli-service serve",
npm run build
This command compiles and minifies the application for production. It achieves this with the `build` command of `vue-cli-service`.
"build": "vue-cli-service build",
;
npm run lint
This command lints and fixes files in your project. It uses the `lint` command of `vue-cli-service`.
"lint": "vue-cli-service lint",
With these commands, you’re efficiently using `vue-cli-service` to manage your Vue.js project.
Vue CLI Plugins
An exciting part of Vue CLI is vue-cli-plugins. These plugins often add global features to your project, like the built-in Babel or ESLint. Plugins can modify the internal webpack configuration and inject commands to `vue-cli-service`.
Here’s an example of how to install and invoke a plugin:
vue add @vue/cli-plugin-babel
The above command installs the babel plugin into your project.
In conclusion, Vue CLI and `vue-cli-service` significantly optimize and simplify the development process for Vue.js applications. They provide a solid starting point for both beginners and seasoned developers.
