vue-cli4

438 阅读2分钟

vue-cli4与vue-cli3的区别:

一:目录结构

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

图片1.png

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

图片2.png

三:package.json文件

依赖升级:"@vue/cli-plugin-babel", "@vue/cli-plugin-eslint", "@vue/cli-service"由 v3 的版本升级到了 v4

图片3.png

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

图片4.png

四: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

图片5.png

二:完成以上工作后,就可以安装了:

在命令行中输入:npm install –g @vue/cli
    

图片6.png

校验vue-cli版本:vue -V

图片7.png

三:使用vue-cli命令行创建项目

图片8.png

回车:请选择配置方式(上下箭头选择): 默认vue2.0 配有babel 和eslint 默认 vue3.0 配有 babel 和 eslint 手动配置 (我的选择)

图片9.png

选中后回车

图片10.png

上下箭头切换,空格键选择(按两下就是没有选中,带星号为选中选项)选择好后回车 选择vue的版本类型:

图片11.png

回车: 是否使用history模式(输入y)

图片12.png

回车:这里选择独立的文件

图片13.png

回车:是否保存为模板?

图片14.png

回车就可以了