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

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