Npm Install Vue Cli Service

Posted on  by admin

Inside a Vue CLI project, @vue/cli-service installs a binary named vue-cli-service.

You can access the binary directly as vue-cli-service in npm scripts, or as ./node_modules/.bin/vue-cli-service from the terminal. This is what you will see in the package.json of a project using the default preset:. You can invoke these scripts using either npm or Yarn:.

If you have npx available (should be bundled with an up-to-date version of npm), you can also invoke the binary directly with:.

You can run scripts with additional features using the GUI with the vue ui command. Here is the Webpack Analyzer from the GUI in action:.

Copying to clipboard might not work on a few platforms. If copying was successful, (copied to clipboard) is displayed next to the local dev server URL. The vue-cli-service serve command starts a dev server (based on webpack-dev-server) that comes with Hot-Module-Replacement (HMR) working out of the box.

In addition to the command line flags, you can also configure the dev server using the devServer field in vue.config.js. [entry] in the CLI command is defined as the entry file (default: src/main.js or src/main.ts in TypeScript project), not an additional entry file.

If you overwrite the entry in the CLI, then the entries from config.pages are no longer considered, which may cause an error.

vue-cli-service build #

vue-cli-service build produces a production-ready bundle in the dist/ directory, with minification for JS/CSS/HTML and auto vendor chunk splitting for better caching.

Custom Templates

The chunk manifest is inlined into the HTML. There are a few useful flags:. --modern builds your app using Modern Mode, shipping native ES2015 code to modern browsers that support it, with auto fallback to a legacy bundle. --target allows you to build any component(s) inside your project as a library or as web components.