Vue CLI

新しく

Vueプロジェクト

を作るには...

これまでの方法

vue init

昔からある

テンプレートが多過ぎ

Scaffoldingだけ

Ejectしかできない

アップグレードが困難

新しい仕組み

が必要ですよね...

Vue CLI 3.0 

yarn global add @vue/cli
yarn global remove vue-cli

今すぐインストール!

どう違うのか?

もう一度、

完全に一から作り直し

プラグインベースの完全に

新しいアーキテクチャー

パワフルで拡張性のあるAPI

最終ゴールは...

スタンダードな

ビルド用ツールチェイン

Vue CLI 3.0

とても高機能

vue create

ビルトイン

ゼロ・コンフィグレーション

すべての機能を提供

Webpack 4

Babel 7

PostCSS

SASS

Stylus

LESS

HTMLの自動生成

モダンモード

マルチページ対応

ライブラリ向けビルド

Webコンポーネント向けビルド

これらすべてが...

インストールするだけ!

テンプレートは

不要になり

プラグイン

選ぶ

欲しい機能を

選ぶだけ...

Typescript

ESLint/TSLint/Prettier

Vue Router

Vuex

PWA

を書きたいですか？

テスト

Cypress

Jest

Mocha

Nightwatch

プロジェクトを作り
その後、選ぶだけ

プラグインのアップグレードで
あなたのアプリもアップグレード

vue create

の話はまだまだ続く...

vue-cli-service <command>

@vue/cli-service

@vue/cli-plugin-typescript

@vue/cli-plugin-eslint

@vue/cli-plugin-pwa

プロジェクト

作成

開発

プロダクションビルド

デプロイ

...

まだ何か
忘れていない？

コミュニティ

プラグイン

275以上のプラグイン
が既に利用可能

あなたも作成しよう！

そして最後に...

Vue CLI

UI

vue ui

グラフィカルなUI
(web アプリ)

Node.js GraphQLサーバー

vue ui

ありません​

Electronは

必要

CLI は

"コマンドラインインターフェイスでは"?!?

待って

Vue CLI 3.0は
実はもっと複雑

より多くの選択肢

より多くのコマンド

より多くのオプション

それでも目標は

アクセスのしやすさ

をシンプルなツールで実現すること

ぜひ一緒に

すべてを

(ありがとう, @Compulves)

つなぎましょう

豊富なコンテキスト情報

詳細な説明

検索性の向上

プロンプトUIの向上

ローカライゼーション

豊富なコンテキスト情報

詳細な説明

検索性の向上

プロンプトUIの向上

ローカライゼーション

まだまだあります...

UI プラグイン API

VUE-CLI UI

を拡張!

インストール時の問い合わせ

// prompts.js
module.exports = [
  {
    type: 'confirm',
    name: 'addApolloEngine',
    message: 'Add Apollo Engine?',
    link: 'http://engine.apollographql.com/',
    default: false,
    group: 'GraphQL Server',
    when: answers => answers.addServer,
  },
  {
    type: 'input',
    name: 'apolloEngineKey',
    message: 'API Key:',
    validate: input => !!input,
    group: 'GraphQL Server',
    when: answers => answers.addApolloEngine,
  },
]

インストール時の問い合わせ

設定画面

// ui.js
module.exports = api => {
  // Config file
  api.describeConfig({
    id: CONFIG,
    name: 'Apollo Server',
    description: 'Integrated GraphQL server',
    link: 'https://github.com/Akryum/vue-cli-plugin-apollo#configuration',
    files: {
      vue: {
        js: ['vue.config.js'],
      },
      graphql: {
        yaml: ['.graphqlconfig.yml'],
      },
    },
    onRead: ({ data, cwd }) => {
      return {
        prompts: [
          {
            name: 'enableMocks',
            message: 'Mocking',
            description: 'Enable auto-mocking for quick prototyping',
            link: 'https://github.com/Akryum/vue-cli-plugin-apollo#mocks',
            type: 'confirm',
            file: 'vue',
            default: false,
            value: getConfigData(data).enableMocks,
          },
        ],
      }
    },
    onWrite: async ({ api, prompts, cwd }) => {
      const result = {}
      for (const prompt of prompts.filter(p => p.raw.file === 'vue')) {
        result[`pluginOptions.apollo.${prompt.id}`] = await api.getAnswer(prompt.id)
      }
      api.setData('vue', result)

      // Update app manifest

      const serverFolder = result['pluginOptions.apollo.serverFolder'] || prompts.find(p => p.id === 'serverFolder').raw.default
      api.setData('graphql', {
        'projects.app.schemaPath': path.join(serverFolder, 'schema.graphql'),
      })
    },
  })
}

設定画面

より複雑なタスク

// ui.js
module.exports = api => {
  api.describeTask({
    match: /vue-cli-service apollo:watch/,
    description: 'Run and watch the GraphQL server',
    link: 'https://github.com/Akryum/vue-cli-plugin-apollo#injected-commands',
    prompts: [
      {
        name: 'open',
        type: 'confirm',
        default: false,
        description: 'org.akryum.apollo.tasks.watch.open'
      },
    ],
    views: [
      {
        id: 'org.akryum.vue-apollo.views.playground',
        label: 'Playground',
        icon: 'gamepad',
        component: 'org.akryum.vue-apollo.components.playground',
      },
    ],
    defaultView: 'org.akryum.vue-apollo.views.playground',
    onRun: () => {
      api.ipcOn(onGraphqlServerMessage)
      setSharedData('running', true)
    },
    onExit: () => {
      api.ipcOff(onGraphqlServerMessage)
      resetData()
    },
  })
}

より複雑なタスク

コンポーネントをカスタマイズ

// ui.js
module.exports = api => {
  api.addClientAddon({
    id: 'org.akryum.vue-apollo.client-addon',
    path: path.resolve(__dirname, './client-addon-dist'),
  })
}
// During plugin dev
module.exports = api => {
  api.addClientAddon({
    id: 'org.akryum.vue-apollo.client-addon',
    url: 'http://localhost:8043/index.js'
  })
}

コンポーネントをカスタマイズ

// src/main.js

import News from './components/News.vue'

ClientAddonApi.component('org.vue.widgets.components.news', News)

クライアント・アドオン:

// vue.config.js
const { clientAddonConfig } = require('@vue/cli-ui')

module.exports = {
  ...clientAddonConfig({
    id: 'vue-apollo',
    port: 8043,
  }),
  outputDir: '../client-addon-dist',
}

ウィジェット

// ui.js
module.exports = api => {
  api.registerWidget({
    id: 'org.vue.widgets.news',
    title: 'org.vue.widgets.news.title',
    description: 'org.vue.widgets.news.description',
    icon: 'rss_feed',
    component: 'org.vue.widgets.components.news',
    detailsComponent: 'org.vue.widgets.components.news',
    minWidth: 2,
    minHeight: 1,
    maxWidth: 6,
    maxHeight: 6,
    defaultWidth: 2,
    defaultHeight: 3,
    openDetailsButton: true,
    defaultConfig: () => ({
      url: 'https://vuenews.fireside.fm/rss'
    }),
    onConfigOpen: async ({ context }) => {
      return {
        prompts: [
          {
            name: 'url',
            type: 'input',
            message: 'org.vue.widgets.news.prompts.url'
          }
        ]
      }
    }
  })
}

ウィジェット

UI プラグイン API

  • サジェスチョン
  • カスタムページ
  • カスタムコンポーネント
  • データ共有
  • アクション
  • フック

今後の話

Vueのアップグレード

エラー表示の改善

設定ページ

コマンドボックスと
ショートカットキー

グローバルUIプラグイン

もっと詳細については

cli.vuejs.org

patreon.com/akryum

Silver sponsor

akryum.threadless.com

Guillaume Chau

@Akryum

github.com/Akryum

ありがとうございました！

bit.ly/2JEyZOO

patreon.com/akryum

akryum.threadless.com

Made with Slides.com