【超Vue.js】5. Vue CLIを使った実践的な開発をはじめる方法【セクション5 】

67. なぜVue CLIを使う必要があるのか

Vue CLI(コマンドラインインターフェイス)...大規模な本格的な開発に必要。

なぜ必要？

1. ファイルの分割

   →大規模な開発で、ファイルを分けたり、くっつけたりしたい。

2. 最終的なコードの軽量化

   →改行、空白、コメントアウトとかを消してデプロイ

3. Babel、Typescript、ESLintなどのpluginの使用

4. HMR（Hot Module Replacement）

   →ファイルを保存するとリアルタイムにブラウザに反映される。開発スピードの向上。

5. .vue、TS、SCSS、Pug、ES6などの使用

68. Vue CLIのインストールと初期設定を行う

npmはnodejs版パッケージ管理マネジャー(node.jsをインストールすれば使える)。rubyでいうgem。

npm install -g @vue/cli

vue create プロジェクト名

Yarnはパッケージマネジャー →npmでもおk

nodejsでdevelopmentサーバーを使う

$ ls
udemy-vue
~/workspace/udemy/vue_study
$ cd udemy-vue
~/.../vue_study/udemy-vue
$ ls                                                                                                                                                                                              
README.md   babel.config.js node_modules    package.json  public        src     yarn.lock

~/workspace/udemy/vue_study
$ vue --version
@vue/cli 4.4.6
~/workspace/udemy/vue_study
$ vue create udemy-vue


Vue CLI v4.4.6
? Please pick a preset: default (babel, eslint)
? Pick the package manager to use when installing dependencies: Yarn


Vue CLI v4.4.6
✨  Creating project in /Users/funesakisuke/workspace/udemy/vue_study/udemy-vue.
  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

yarn install v1.22.4
info No lockfile found.
[1/4]   Resolving packages...
[2/4]   Fetching packages...
[3/4]   Linking dependencies...
[###########################################

success Saved lockfile.
✨  Done in 20.46s.
⚓  Running completion hooks...

  Generating README.md...

  Successfully created project udemy-vue.
  Get started with the following commands:

$ cd udemy-vue
$ yarn serve

$ ls
udemy-vue
~/workspace/udemy/vue_study
$ cd udemy-vue
~/.../vue_study/udemy-vue
$ ls                                                                               
README.md babel.config.js node_modules package.json public src yarn.lock

$ yarn serve  
yarn run v1.22.4
$ vue-cli-service serve
INFO  Starting development server...
98% after emitting CopyPlugin

DONE  Compiled successfully in 9508ms                                                                                                                                                                  20:22:16


  App running at:
  - Local:  http://localhost:8080/
  - Network: http://192.168.1.4:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

サーバーが立ち上がった

69. Vue CLIが作成したそれぞれのファイルの説明

設定ファイルなどVue CLIが作成したファイルの説明

• node_modulesファイル...npm installとかする時にインストールするパッケージが入ってる。

• babe.configはbabelの設定ファイル
  →babelは開発ではES6の最新状態を、公開時にはES5にトランスファイルするためにある。基本的にはいじらない

• webpack
  いろんな分割したファイルを一つのファイルにくっつけてくれるソフトウェア。そしてプロダクションに。
  →設定ファイルとsrcを見て一つのフォルダにして公開してくれる。

• component

• main.jsがindex.htmlに