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 create hello-world

刚入门，一直回车就好，🙂

目录结构是啥样子的，让我们看一下

目录结构

@vue/cli在这次发布中，到底更新了什么呢，首先要说的第一个东西就是简化配置文件，集中配置文件到vue.config.js中,文件在哪呢，木有啊，那是因为@vue/cli做了一些默认的配置。我们可以自己创建一个这样的文件。

vue inspect，是脚手架提供的一个配置检查的服务，并且生成一个你很熟悉的文件

vue inspect > output.js

那么这样，是不是很熟悉呢

webpack配置

是的，这个webpack的一些配置项，那么我们应该怎么书写呢，语法是这样的

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  },
  chainWebpack: config => {
    // GraphQL Loader
    config.module
      .rule('graphql')
      .test(/\.graphql$/)
      .use('graphql-tag/loader')
        .loader('graphql-tag/loader')
        .end()
  }
}

那么，chainWebpack这是个什么东西，作者采用了webpack-chain的思想，内部实现也是webpack-chain来实现webpack的配置，仔细看 webpack-chain的文档就会看出，它是一个链式API的方式来简化配置的一个插件。

晨这边也修改过几个loader,大概分享一下代码吧

module.exports = {
	chainWebpack: config => {
	   config.module.rule('compile')
		   .test(/\.js$/)
		   .include.add('./examples').add('./packages').end()
		   .use('babel')
		   .loader('babel-loader')
		   .options({
			   presets: [
				   ['babel-preset-es2015', {modules: false}]
			   ]
		   });
	   // https://github.com/friends-of-js/yaml-loader
	   config.module.rule("yml")
		   .test(/\.ya?ml$/)
		   .use('yaml')
		   .loader('@friends-of-js/yaml-loader')
		   .options({
			   useNodeEnv: true 
		});
	}
}

vue ui

最后我们来介绍另一个东西，对，没错，现在要说的就是vue ui,它是做什么的呢？

项目管理，包括创建和导入
插件管理，包括依赖管理
任务启动及监控

目前该ui属于Beta版本，可能会出现bug,相信社区会让其更加完善和强大。