Upgrade to Pro — share decks privately, control downloads, hide ads and more …

フロントエンドわからなさすぎるのでVue CLIが吐き出すファイルを読む / Read the files generated by Vue CLI

Yuuki Sumida
December 22, 2018

フロントエンドわからなさすぎるのでVue CLIが吐き出すファイルを読む / Read the files generated by Vue CLI

Yuuki Sumida

December 22, 2018
Tweet

More Decks by Yuuki Sumida

Other Decks in Technology

Transcript

  1. #gbdaitokai とか #忘年会議 とか
    株式会社アイネット
    テックリード 兼 採⽤・⼈事担当 兼 営業 兼 以下略
    Yuuki Sumida (@razon)
    ABOUT ME

    View full-size slide

  2. 前回のあらすじ

    View full-size slide

  3. よろしくおね
    がいします

    View full-size slide

  4. https://cli.vuejs.org/

    View full-size slide

  5. https://vuejs.org/v2/guide/

    View full-size slide

  6. $ npm install -g @vue/cli @vue/cli-service-global
    $ vue -V
    3.2.1

    View full-size slide

  7. package.json

    View full-size slide

  8. node_modules/@vue/cli-service/bin/cli-service.js

    View full-size slide

  9. node_modules/@vue/cli-service/lib/commands/serve.js

    View full-size slide

  10. https://webpack.js.org/

    View full-size slide

  11. https://github.com/webpack/webpack-dev-server

    View full-size slide

  12. node_modules/@vue/cli-service/package.json

    View full-size slide

  13. node_modules/@vue/cli-plugin-babel/index.js

    View full-size slide

  14. https://cli.vuejs.org/guide/plugins-and-presets.html#plugins

    View full-size slide

  15. https://www.npmjs.com/search?q=%40vue%2Fcli-plugin

    View full-size slide

  16. https://cli.vuejs.org/config/#global-cli-config

    View full-size slide

  17. vue-cli-serviceがビルドなどのタスクを担当
    ビルド⾃体はwebpack4(とwebpack-dev-server)
    プラグインごとにビルドの設定を読み込んでチェ
    ーンしている
    基本config lessだがプロジェクトごとの設定は設
    定ファイルを追加して書いていく
    フロントエンドわからん
    ざっくりとまとめ

    View full-size slide

  18. ご清聴ありがとうございました
    おしまい

    View full-size slide