前言
由于之前的项目中都是用的vue-cli2.x版本,最近新开的项目使用了vue-cli3.x版本的脚手架,因此总结一下笔记,方便以后查看使用。
关于旧版本
VueCLI的包名称由vue-cli改成了
vue/cli。如果你已经全局安装了旧版本的vue-cli(1.x或2.x)你需要先通过npmuninstallvue-cli-g或yarnglobalremovevue-cli卸载它。Node版本要求VueCLI需要Node.js8.9或更高版本(推荐8.11.0+)。你可以使用nvm或nvm-windows在同一台电脑中管理多个Node版本。安装
可以使用下列任一命令安装这个新的包:
npminstall-g
vue/cli#ORyarnglobaladdvue/cli安装之后,你就可以在命令行中访问vue命令。你可以通过简单运行vue,看看是否展示出了一份所有可用命令的帮助信息,来验证它是否安装成功。你还可以用这个命令来检查其版本是否正确:
vue--version创建项目
当你安装vue-cli3.x版本以后,已经无法在使用之前的命令,需要以下方式。拉取2.x模板(旧版本)
VueCLI=3和旧版使用了相同的vue命令,所以VueCLI2(vue-cli)被覆盖了。如果你仍然需要使用旧版本的vueinit功能,你可以全局安装一个桥接工如下:npminstall-g
vue/cli-init#`vueinit`的运行效果将会跟`vue-cli2.x`相同vueinitwebpackmy-project!--通过以下命令创建项目--vueinitwebpackmyApp创建3.x模版(新版本)运行以下命令来创建一个新项目:
vuecreatehello-world你会被提示选取一个preset。你可以选默认的包含了基本的Babel+ESLint设置的preset,也可以选“手动选择特性”来选取需要的特性。
通过方向键选择特性,空格确认插件,回车确认完成选项===这里我选择了手动配置(Manually)
添加了Babel和Vuex和Router还有CSSPre-processors插件
接下来会让你选择router的模式,默认回车
接下来会让你选择CSSPre-processors的格式,这里选择了Sass/SCSS(withnode-sass)
最后我们选择配置文件格式为package.json,然后保存配置即可完成。
项目结构如图:
配置参考
vue.config.js
vue.config.js是一个可选的配置文件,如果项目的(和package.json同级的)根目录中存在这个文件,那么它会被
vue/cli-service自动加载。你也可以使用package.json中的vue字段,但是注意这种写法需要你严格遵照JSON的格式来写。这个文件应该导出一个包含了选项的对象:
//vue.config.jsmodule.exports={//选项...}以上内容都是vuecli官方文档有的。大家也可以直接去看