install

1
volta install @vue/cli

Overview

CLI

vue command

1

CLI Service

build on top of webpack and webpack-dev-server.

It contains:

• The core service that loads other CLI Plugins
• An internal webpack config that is optimized for most apps
• The vue-cli-service binary: serve, build, inspect

CLI Plugins

• @vue/cli-plugin- for built-in plugins
• vue-cli-plugin- for community plugins

vue-cli-service automatically resolves and loads all CLI Plugins listed in package.json

• cli-plugin-typescript
• cli-plugin-babel
• cli-plugin-eslint
• cli-plugin-e2e-cypress
• cli-plugin-router
• cli-plugin-vuex

Preset

A Vue CLI preset is a JSON object that contains pre-defined options and plugins.

.vuerc

Env

1
2
3
4
.env                # loaded in all cases
.env.local          # loaded in all cases, ignored by git
.env.[mode]         # only loaded in specified mode
.env.[mode].local   # only loaded in specified mode, ignored by git

An env file simply contains key=value pairs of environment variables:

1
VUE_APP_NOT_SECRET_CODE=some_value

Note that only NODE_ENV, BASE_URL, and variables that start with VUE_APP_ will be statically embedded into the client bundle with webpack.DefinePlugin.

Dependencies

Autoprefixer

PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use.

Autoprefixer uses Browserslist

https://github.com/postcss/autoprefixer

Babel

• Transform syntax
• Polyfill (through a third-party polyfill such as core-js)
• Source code transformations

1
2
3
# @babel/core
# @babel/parser -> @babel/traverse -> @babel/generator
Input Source Code -> Origin AST -> Transformed AST -> Output Source Code