怪咖晨

Vue CLi 3快速入门

。一笑奈何 vue@vue/clijavascript

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 -gyarn 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,它是做什么的呢?

  1. 项目管理,包括创建和导入 项目管理
  2. 插件管理,包括依赖管理 插件管理 依赖配置 项目配置
  3. 任务启动及监控 vue ui项目任务启动及监控

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

。一笑奈何
高山仰止,景行行止。虽不能至,心向往之