Vue CLi 3快速入门
2018年08月13日在开源中国收到了Vue CLi 3.0 正式版的发布,关于它的横空出世,晨在这里简单说一下,很多人在微博都在调侃Vue,说是不是更新太块了,都学不过来,下面是我搜集的几张图,
解释一下,Vue这次并没有发布新版本,而是出了一个简化配置的脚手架,命名为Vue CLi 3,不过调侃小右的也是用尽了各种技能。
好了,言归正传,回归我们今日的正题,快速入门Vue CLi 3,打开官方文档我们都能看到
Vue CLI 的包名称由
vue-cli
改成了@vue/cli
。 如果你已经全局安装了旧版本的vue-cli
(1.x 或 2.x),你需要先通过npm uninstall vue-cli -g
或yarn global remove vue-cli
卸载它。
安装的细节,我们这里不做过多的阐述,具体的可以查看官方文档Vue CLi 3
创建项目
|
|
刚入门,一直回车就好,🙂
目录结构是啥样子的,让我们看一下
@vue/cli
在这次发布中,到底更新了什么呢,首先要说的第一个东西就是简化配置文件,集中配置文件到vue.config.js
中,文件在哪呢,木有啊,那是因为@vue/cli
做了一些默认的配置。我们可以自己创建一个这样的文件。
vue inspect
,是脚手架提供的一个配置检查的服务,并且生成一个你很熟悉的文件
|
|
那么这样,是不是很熟悉呢
是的,这个webpack的一些配置项,那么我们应该怎么书写呢,语法是这样的
|
|
那么,chainWebpack
这是个什么东西,作者采用了webpack-chain的思想,内部实现也是webpack-chain
来实现webpack
的配置,仔细看 webpack-chain
的文档就会看出,它是一个链式API的方式来简化配置的一个插件。
晨这边也修改过几个loader,大概分享一下代码吧
|
|
vue ui
最后我们来介绍另一个东西,对,没错,现在要说的就是vue ui
,它是做什么的呢?
- 项目管理,包括创建和导入
- 插件管理,包括依赖管理
- 任务启动及监控
目前该ui属于Beta
版本,可能会出现bug,相信社区会让其更加完善和强大。