The difference between Vue-CLI4 and Vue-CLI3:

1: Directory structure

Vue-cli3 —————————————————————————- vue-cli4

Vue-cli4 changes:

SRC /store/index.js SRC /router.js SRC /router/index.js

Babel.config.js file

Babel preset is changed from @vue/app to @vue/ cli-plugin-Babel /preset

Three: package.json file

Dependency upgrade: “@vue/cli-plugin-babel”, “@vue/cli-plugin-eslint”, “@vue/cli-service” was upgraded from V3 to V4

Core-js was upgraded from v2 to V3

Vue CLI 4 Upgrade point summary

1.”@vue/cli-plugin-babel”, “@vue/cli-plugin-eslint”, “@vue/cli-service” was upgraded from V3 to V4

2. Upgrade sass-Loader from V7 to V8

3. Core-js was upgraded from V2 to V3

4. Upgrade webpack-chain from V4 to V6

5. The CSS – Loader version is upgraded from V1 to V3

6. The URl-loader version is upgraded from V1 to V2

7. Upgrade the file-loader from V3 to V4

8. The copy-webpack-plugin was upgraded from V4 to V5

9. Terser-webpack-plugin was upgraded from V1 to V2

10.@vue/cli-plugin-pwa upgrade from V3 to V4

11.新增插件 vue add vuex vue add router

12. Pug-plain is renamed to pug-plain-loader

13. The default directory structure has been changed

SRC/store. Js to SRC/store/index, js

SRC/router. Js to SRC/router/index, js

14. For compatibility reasons, the router&routerHistoryMode option is still supported for PRESET. Json but now it is recommended to use it to plugins: {‘@vue/cli-plugin-router’: {historyMode: 15. Api.hasplugin (‘vue-router’) is no longer supported, now api.hasplugin (‘router’)

16. Changed the default value (when not specified) of the lintOnSave option from True to default

17. Discard vue-cli-service test:e2e

18.@vue/cli-plugin-e2e-nightwatch Nightwatch. Js has been upgraded from 0.9 to 1.x

19.@vue/cli-plugin-unit-mocha Upgrade to Mocha 6

20.@vue/cli-plugin-unit-jest Upgrade jest from V23 to V24

21.@vue/cli-plugin-typescript better TS (x) support over JS (x)

Reference documents:www.cnblogs.com/zhouyu2017/…

Installation and use:

One: preparation

1) node. Js environment (NPM) : www.cnblogs.com/zhouyu2017/… ② Uninstall the ue-cli4.0 version: NPM uninstall vue-cli -g or YARN global remove vue-cli

Two: after the completion of the above work, you can install:

On the CLI, enter NPM install -g@vue /cliCopy the code

Verify the Vue – CLI version: vue -v

Create a project using the ue-cli command line

Enter: Please select configuration mode (up and down arrow) : Default vue2.0 with Babel and ESLint Default Vue3.0 with Babel and ESLint manual configuration (my choice)

Select and press Enter

Toggle the up and down arrows, select the space bar (press twice to select the option that is not selected, asterisk is selected), and then press Enter to select the version type of VUE:

Enter: Whether to use history mode (enter y)

Enter: Select a separate file here

Enter: Do you want to save as a template?

Just press enter