The main difference

  • Installation and project construction
  • Project directory changes
  • Project Configuration Changes

Installation & Project build

CLI installation

The cli package name is changed

# cli 2.x 
npm install -g vue-cli

# cli 3.x 
If 2.x was previously installed, you need to uninstall 2.x and install it again
npm install -g @vue/cli
Copy the code

The project build

cli2.x
vue init <template-name> <project-name>
npm i 
npm run dev
Copy the code
cli3.x
  • The installation of newTypeScriptConfiguration options
  • newGraphical Installationmethods
  • The installation method before 2.x is retained
vue create hello-world
npm i
npm run serve
# Create a new project using vue UI (3.x new)
vue ui
# create with old version (2.x)
npm install -g @vue/cli-init
# 'vue init' works the same as' [email protected] '
vue init webpack projectname
Copy the code

3. Directory structure changes after x [New features to replace 2.x function]

configDirectory deletion, using mode.envFile instead of [model]

Cli3 added the concept of mode, each mode has a corresponding configuration file in the project, when the project starts, the corresponding file will be loaded, unlike environment variables, a mode can include multiple environment variables

  • Vue CLIThe project defaults to three modes:
    • developmentPattern is used tovue-cli-service serve
    • productionPattern is used tovue-cli-service build 和 vue-cli-service test:e2e
    • testPattern is used tovue-cli-service test:unit
  • Mode needs to be used when starting the project--modeThe specified
NODE_ENV=development npm run serve --mode mymode The pattern contains multiple environment variables
Copy the code
  • Each pattern has multiple environment variables,cli3.xOne is specified for schema and environment variables.envThe configuration file
.env # All environments
.env.mode # config file loaded in mode [priority over.env]
.env.mode.development Configuration files loaded in the development environment in mode [highest priority]
Copy the code
  • .envFile Details
    • These files are used insteadconfigThe directory
    • In order toVUE_APP_The leading variable can be passed through the codeprocess.envAccess, other variables are not accessible
    • Process. env always contains two special variablesNODE_ENVandBASE_URL

The config directory of the 3.x version is deleted, but if you are not used to the. Env mode, you can specify NODE_ENV without setting any mode and use the config method of 2.x to configure parameters

Delete static directory [public directory]

The static directory is removed, and its static resources are moved to the public directory, which can be accessed directly through /xx.xx

publicThe detailed information
  • index.htmlImport files from the root directory topublicUnder the directory, it has three special interpolations
    • <%= VALUE %>Used to do unescaped interpolation;
    • <%- VALUE %>Used to do HTML escape interpolation;
    • <% expression %>Used to describe JavaScript flow control
  • Static resources are transferred topublicDirectory to store
  • cli3A project’s static resources can be handled in two ways
    • In JavaScriptortemplate/css(vue)Is imported through a relative path. Such resources are handled by Webpack (notpublicDirectory)
    • On thepublicDirectories or static resources that are imported using absolute paths. Such resources are copied directly without passing throughwebpackTo deal with

cli3.xDifferences in project configuration (buildDirectory deletion)

2. X project configuration is done in config and build, but in 3.x, these two directories are deleted. If you need to customize the configuration, you need to create a vue.config.js file

  • publicPath
    • The basic URL for deploying the application package, that iswebpacktheoutput.publicPath
    • But,vueIt will be used elsewhere in the projectpublicPath, so do not modifywebpacktheoutput.publicPath
    • To replacebaseUrlThe,BaseUrl 3.3Since abandoned
  • outputDir
    • buildThe directory where the build files are stored
    • namelyoutput.path, but can only be modifiedoutputDir, cannot be modifiedoutput.path
  • assetsDirAfter compiling, inoutputDirDirectory The directory in which static resources are stored
  • lintOnSaveconfigurationeslintAfter, whether to save each timelintCode, start by default
  • runtimeCompilerWhether to use a Vue build with a runtime compiler, not started by default
  • configureWebpack & chainWebpack
    • These two options are used for configurationwebpackContent, the former is a merge object, the latter is a chain call
    • [cli3.6]webpackthebuildCode compression is disabled by default. You need to set the environment variable toproductionWill open
  • devServerSupport allwebpack-dev-serveroptions
    • Configure the project port and domain nameHost, port, HTTPS
    • Configure the project cross – domain proxyproxy
    module.exports = {
  port: 8100.devServer: {
    proxy: 'http://localhost:4000'}}Copy the code

New Features

Rapid prototyping

In CLI3. x you can use vue serve and vue build commands for rapid prototyping of individual *. Vue files

The downside of Vue Serve is that it requires global dependencies to be installed, which makes it inconsistent across machines. So this is only for rapid prototyping

Install global dependencies
npm install -g @vue/cli-service-global
Copy the code

A single file

<template>
  <h1>Hello!</h1>
</template>
Copy the code
vue serveRun the file
Vue serve myComponent. Vue Usage: Serve [options] [Entry] Zero configuration in development environment mode with.js or.vue file to start a server Options: -o, --open To open the browser -c, --copy copies the local URL to the clipboard -h, --help prints usage informationCopy the code
vue buildCompile the file
Vue build myComponent.vue Usage: build [options] [entry] Build a.js or.vue file in production mode with zero configuration options: - t -- target < target > build targets (app | lib | wc | wc - async default: app) - n - name < name > library name or Web Components component name (default: entry file name)-d, --dest <dir> Output directory (default: dist) -h, --help output usage informationCopy the code

Graphical interface

Vue CLI3 added a UI graphical management page, you can use it to create new projects, management of the original project plug-ins

Creating a new project
vue ui # Start the graphical interface
Copy the code
Create project names, administrative tools, and so on

Options are default, custom Settings, pull from remote repository

In the first and third options, create the project directly. In the second option, proceed to the next step, and the function and configuration page information is the same as the previous command line installation

Manage existing projects (including 2.X projects)
  • Plug-in Management (Update, view) (3.x)
  • Dependencies (Module) Management (delete, install, update, view) (2.x, 3.x)
  • Item Configuration Modification (3.x)
  • Project tasks (project script command to start and stop operations) (2.x, 3.x)

cliThe plug-in

What is a plug-in
  • vue cli3.xUsing a plug-in based architecture, cli dependencies are based on@vue/cli-plugin-At the beginning of
  • Plugins can modify internalwebpackConfiguration can also be directed tovue-cli-serviceInto the command
  • Most of the features listed during project creation are implemented through plug-ins
vue addPlug-in installation

The cli3.x project provides the vue add command to install the plug-in

vue add @vue/cli-plugin-eslint
Copy the code

At the same time, the command can recognize the following syntax, and the command is equivalent to the command in the previous line

vue add eslint
vue add @vue/eslint
Copy the code

This command can also install third-party plug-ins within a specified range

# plugin name: @foo/vue-cli-plugin-bar
vue add @foo/bar
Copy the code

You can also pass generator options to plug-ins

This skips the command prompt

vue add @vue/eslint --config airbnb --lintOn save
Copy the code
specialvue-routerandvuex

There are no plug-ins for them, but you can still add them to your project using Vue Add

vue add router
vue add vuex
Copy the code
vue invokeCall generator

This command will skip the installation process and call the plug-in generator directly, receiving the same arguments as vue add

vue invoke @foo/bar
Copy the code
Local plug-in reading

You can use the vueplugin.service configuration if you only need to access the plug-in API directly in your project without creating a complete plug-in

{
  "vuePlugins": {
    "service": ["my-commands.js"]}}Copy the code

Or add vueplugin. UI as a UI plug-in

{
  "vuePlugins": {
    "ui": ["my-ui.js"]}}Copy the code

The default configuration

What is the default configuration

The default configuration is a JSON object that contains predefined options and plug-ins needed to create a new project. If you select this object file when creating a project, you can install the JSON content of the common project of the file, which can be quickly customized to create a project

{
  "useConfigFiles": true."router": true."vuex": true."cssPreprocessor": "sass"."plugins": {
    "@vue/cli-plugin-babel": {},
    "@vue/cli-plugin-eslint": {
      "config": "airbnb"."lintOn": ["save"."commit"]}},"configs": {
    "vue": {... },"postcss": {... },"eslintConfig": {... },"jest": {... }}}Copy the code

The default configuration includes plug-in generator configuration and integration tool configuration waiting for these configurations to be merged into package.json or corresponding configuration files according to useConfigFiles, such as when “useConfigFiles”: When true, the configs values will be merged into vue.config.js

Default configuration of plug-in versioning

The specified range of versions that can be displayed by the plug-in in the default configuration, if no value is specified by the latest version in Registry (official recommendation specified)

{
  "plugins": {
    "@vue/cli-plugin-eslint": {
      "version": "^ 3.0.0"./ /... Additional options for the plug-in}}}Copy the code
Allows plug-in command prompt

Each plug-in can inject its own prompts during project creation, but they can be skipped if you use a default configuration. If you need to show a command prompt, you need to set “Prompts “: true

{
  "plugins": {
    "@vue/cli-plugin-eslint": {
      // Let users select their own ESLint configuration
      "prompts": true}}}Copy the code

Use of preset configurations

Load multiple preset configurations at the same time, select Use

By default, the preset configurations saved during vue create are stored in ~/. Vuerc. Writing preset configurations to vuerc’s ‘presets’ property allows multiple preset configurations to be displayed when recreating a project. Simply select the project you want to create

{
  "useTaobaoRegistry": false."packageManager": "npm"."presets": { // Multiple preset configurations can be added where preset configurations are added
    "my_sets": { // Default configuration named 'my_sets'
      "useConfigFiles": true."router": true."vuex": true."cssPreprocessor": "sass"."plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-eslint": {
          "config": "airbnb"."lintOn": ["save"."commit"]}}}}}Copy the code

invue createCommand.--presetSpecify default configuration

This format can only load JSON files, and it has two forms: local default and remote default

Local preset

Local preset is loaded if the –preset option’s value is a relative or absolute file path, or ends in.json, otherwise remote preset is loaded

#./my-preset should be a folder containing preset. Json
vue create --preset ./my-preset my-project

Or, just use the json file in the current working directory:
vue create --preset my-preset.json my-project
Copy the code
Remote preset

Get presets shared by others from Git

  • Publish default configuration: By publishgit repoShare a preset configuration with other developers,repoThe following files should be included: *preset.json: Main file that contains the preset configuration data (required).
    • generator.js: a Generator that can inject or modify files in a project.
    • prompts.js: One can begeneratorCollection of optionspromptsfile
  • Pull configuration
# Use default configuration from GitHub repo
vue create --preset username/repo my-project
Copy the code
  • GitLab 和 BitBuckeT is also supported. If you want to get it from a private REPO, be sure to use it--cloneOptions:
vue create --preset gitlab:username/repo --clone my-project
vue create --preset bitbucket:username/repo --clone my-project
# self-managed REPO
vue create --preset gitlab:my-gitlab-server.com:group/projectname --clone my-project
vue create --preset direct:ssh://[email protected]/group/projectname.git --clone my-project
Copy the code

Example Configuration file

const path = require('path')
function resolve (dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  publicPath: '/'.assetsDir: 'static'.productionSourceMap: false.configureWebpack: config= > {
    if (process.env.VUE_APP_NODE_ENV === 'production') {
      // Modify the configuration for the production environment...
    } else {
      // Modify the configuration for the development environment...}},// Parsing alias processing
  chainWebpack: config= > {
    config.resolve.alias
      .set('@img', resolve('src/assets/img'))
      .set('@c', resolve('src/components'))
      .set('@m', resolve('src/mixins'))
      .set('@v', resolve('src/views'))
      .set('@s', resolve('src/store'))},// The configuration is higher than the CSS Loader configuration in chainWebpack
  css: {
    // Whether to enable support for foo.module. CSS styles
    modules: false.// Whether to use CSS ExtractTextPlugin, using independent style file load, do not use 
    extract: true.// Whether to build style maps, false will speed up the build
    sourceMap: false.// CSS default configuration item
    loaderOptions: {
      css: {
        // options here will be passed to css-loader
      },
      postcss: {
        // options here will be passed to postcss-loader}}},devServer: {
    port: 8010}}Copy the code