This document is based on @vue/ CLI version 4.

It provides scaffolding for the VUE project out of the box, hiding the specific configuration and viewing the Webpack configuration with the VUe-cli-service inspect command. You can also override the default configuration in vue.config.js.

The basic use

  • Installation:
npm update -g @vue/cli
Copy the code
  • Creating a new project
vue create my-app
Copy the code

There are interactive commands to make some choices such as vUE version, whether to use TS, etc.

@vue/ CLI consists of the following two core modules:

@vue/cli-service

Development environment dependencies. Based on WebPack and WebPack Dev Server. It provides loading other CLI plug-ins, webpack configuration, and provides commands such as serve, build, etc. (a command named vue-cli-service is installed).

serve

You can configure the development server by adding command-line arguments or in the devServer field of the vue.config.js file.

build

Provides command-line arguments such as –mode, –dest, and so on to package the production environment bundle. The files are compressed, Vendor Chunk splitting.

inspect

View the WebPack configuration.

@vue/cli-plugin-XX

An NPM package that provides optional functionality for the project. The plug-ins listed in package.json are automatically loaded when the vue-cli-service command is run.

You can add a Vue CLI plugin with a call such as vue add esLint (other normal packages are still installed directly through NPM), which is internally resolved to the full package name @vue/ cli-plugin-esLint and installed from NPM.

Some plug-ins inject the vue-cli-service commandName command into vue-cli-service. You can view all commands through NPX vue-cli-service help.

The engineering practice

html

The index.html in the project root directory is handled by the html-webpack-plugin.

js

Code-spliting can be turned off in vue.config.js:

module.exports = {
    chainWebpack: config= > {
        config.optimization.delete('splitChunks')}}Copy the code

css

If you want to use the preprocessor, you do not need to install loader. For example:

npm install -D sass-loader sass
Copy the code

In addition the scaffolding for internal use PostCSS, can be in. Postcssrc file or vue. Config. Js, CSS. LoaderOptions. PostCSS configure corresponding fields.

Autoprefixer is enabled internally by default.

Static resource

  • What is imported via a relative path in JS or Template/CSS is handled by Webpack
  • In the public directory, or via an absolute path, is not processed by Webpack but copied directly.

Static resources are loaded with hash values to facilitate caching, and preload and prefetch can be disabled in vue.config.js:

module.exports = {
    filenameHashing: false.chainWebpacl: config= > {
        config.plugins.delete('preload'),
        config.plugins.delete('prefetch')}}Copy the code

model

The pattern determines the configuration of the WebPack at build time.

There are three default modes:

  • When usingvue-cli-service serveWhen the command is executed, isdevelopmentmodel
  • When usingvue-cli-service buildorvue-cli-service test:e2eTime forproductionmodel
  • When usingvue-cli-service test:unitfortestmodel

You can override the default mode by adding the –mode parameter.

Note: When running vue-cli-service build, you always need to set NODE_ENV to production to build the Webpack configuration required by the deployment environment.

When the vue-cli-service command is run, the environment variables in the environment file are automatically loaded. If NODE_ENV is not defined in the environment file, it is set to the value of –mode.

Environment variables can be set in the following files:

.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
Copy the code

Only NODE_ENV, BASE_URL, and VUE_APP_ variables are injected into the client bundle by webpack.definePlugin. So some custom variables should start with VUE_APP_.

Suppose we have a stage environment and need to add an.env.stage file under the project root directory to set the environment variables:

NODE_ENV=production
VUE_APP_API=https://path/of/stage/api
Copy the code

To reference environment variables in JS or HTML templates:

<script>
  window.API = "<%= process.env.VUE_APP_API %>"
</script>
Copy the code
const API = process.env.VUE_APP_API
Copy the code

Get the value of the environment variable on the client side through process.env.envvarname. Defined environment variables can also be injected into HTML templates.

The output target

Vue-cli-service build can be run with the –target parameter to specify the build target for output. Its value including app | lib | wc | wc – async (default: app)

App is the default mode, and resources are automatically injected into HTML. The third-party library code is split to a separate vendor. By default, resources smaller than 4K will be transferred to base64 inline, and static resources in public directory will be copied to dist directory intact.

The vUE component can also be exported as a Web Component. By default, the VUE library is not packaged in this mode, but is introduced as a global variable by the default user (for example, CDN loading a VUE). To avoid this, add the –inline-vue argument:

vue-cli-service build --target wc --inline-vue
Copy the code
  • Packaging a single VUE component:
vue-cli-service build --target wc --name my-element [entry]
Copy the code

Entry must be the path to a. Vue file.

  • Package multiple vue files that can be glob matched:
vue-cli-service build --target wc --name foo 'src/components/*.vue'
Copy the code

The –name parameter is the prefix of web Components, and the final name is –name parameter value -vue file name. For example, if there is a helloworld. vue file, the Web Components tag would be named foo-hello-world.

Internally, @vue/web-component-wrapper is used to convert vue components to Web Components.