vue-cli4

vue-cli4與vue-cli3的區別：

一：目錄結構

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

Vue-cli4的更改：

src/store.js 改成 src/store/index.js src/router.js 改成 src/router/index.js

二：babel.config.js文件

babel 的預設由@vue/app 改爲了@vue/cli-plugin-babel/preset

三：package.json文件

依賴升級："@vue/cli-plugin-babel", "@vue/cli-plugin-eslint", "@vue/cli-service"由 v3 的版本升級到了 v4

core-js由 v2 的版本升級到了 v3

四：vue cli 4升級點總結

1."@vue/cli-plugin-babel", "@vue/cli-plugin-eslint", "@vue/cli-service"由 v3 的版本升級到了 v4
2.sass-loader由 v7 的版本升級到了 v8
3.core-js由 v2 的版本升級到了 v3
4.webpack-chain由 v4 的版本升級到了 v6
5.css-loader由 v1 的版本升級到了 v3
6.url-loader由 v1 的版本升級到了 v2
7.file-loader由 v3 的版本升級到了 v4
8.copy-webpack-plugin由 v4 的版本升級到了 v5
9.terser-webpack-plugin由 v1 的版本升級到了 v2
10.@vue/cli-plugin-pwa由 v3 的版本升級到了 v4
11.新增插件 vue add vuex vue add router
12.pug-plain已重命名爲pug-plain-loader
13.默認目錄結構已更改
src/store.js 改成 src/store/index.js
src/router.js 改成 src/router/index.js
14.因爲兼容性緣由，仍支持 router＆routerHistoryMode 選項 preset.json 可是如今建議使用它來 plugins: { '@vue/cli-plugin-router': { historyMode: true } } 得到更好的一致性 15.api.hasPlugin('vue-router')再也不受支持，如今 api.hasPlugin('router')
16.lintOnSave 選項的默認值（未指定時）從 true 更改成 default
17.廢棄vue-cli-service test:e2e
18.@vue/cli-plugin-e2e-nightwatch Nightwatch.js已從0.9升級到1.x
19.@vue/cli-plugin-unit-mocha 升級到Mocha 6
20.@vue/cli-plugin-unit-jest jest由 v23 升級到v24
21.@vue/cli-plugin-typescript 更好的ts(x)支持 ，賽過js(x)
參考文檔：www.cnblogs.com/zhouyu2017/…

安裝與使用：

一：準備工做

①node.js環境(npm)：www.cnblogs.com/zhouyu2017/…
②卸載以前安裝好的vue-cli4.0如下版本：npm uninstall vue-cli –g 或 yarn global remove vue-cli

二：完成以上工做後，就能夠安裝了：

在命令行中輸入：npm install –g @vue/cli
    
複製代碼

校驗vue-cli版本：vue -V

三：使用vue-cli命令行建立項目

回車：請選擇配置方式（上下箭頭選擇）： 默認vue2.0 配有babel 和eslint 默認 vue3.0 配有 babel 和 eslint 手動配置 （個人選擇）

選中後回車

上下箭頭切換，空格鍵選擇（按兩下就是沒有選中，帶星號爲選中選項）選擇好後回車 選擇vue的版本類型：

回車: 是否使用history模式（輸入y）

回車：這裏選擇獨立的文件

回車：是否保存爲模板？

回車就能夠了