所在的位置: js >> js优势 >> VueCLI3x配置指南初识VueC

VueCLI3x配置指南初识VueC

头部白癜风和白癜风的区别 http://m.39.net/pf/a_4624555.html

前言

由于之前的项目中都是用的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#ORyarnglobaladd

vue/cli安装之后,你就可以在命令行中访问vue命令。你可以通过简单运行vue,看看是否展示出了一份所有可用命令的帮助信息,来验证它是否安装成功。

你还可以用这个命令来检查其版本是否正确:

vue--version创建项目

当你安装vue-cli3.x版本以后,已经无法在使用之前的命令,需要以下方式。拉取2.x模板(旧版本)

VueCLI=3和旧版使用了相同的vue命令,所以VueCLI2(vue-cli)被覆盖了。如果你仍然需要使用旧版本的vueinit功能,你可以全局安装一个桥接工如下:npminstall-g

vue/cli-init#`vueinit`的运行效果将会跟`vue-cli

2.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官方文档有的。大家也可以直接去看


转载请注明:http://www.aierlanlan.com/grrz/3629.html

  • 上一篇文章:
  •   
  • 下一篇文章: