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. View Slide

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

    View Slide

  3. 前回のあらすじ

    View Slide

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

    View Slide

  5. View Slide

  6. https://cli.vuejs.org/

    View Slide

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

    View Slide

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

    View Slide

  9. $ vue ui

    View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. package.json

    View Slide

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

    View Slide

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

    View Slide

  16. https://webpack.js.org/

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide