CLIを使うメリット
- 大規模アプリケーションの開発に用いられる
- ファイルの分割ができる
- 最終的に公開するコードをminファイル化してくれる（軽量化）
- プラグインの追加が簡単になる
- HMR（HTMLを変更した時にブラウザーに自動的に保存される）
- SCSS、ES6などが使える
環境
IDE：Visual Studio Code（以下vsCode）
OS：Win10
セットアップ方法
vsCodeのTERMINALをひらいて下記のコマンドを実行。
インストールには時間がかかります。
npm install -g @vue/cli
インストールが終わったら、vueコマンドが使えるようになったか確認。
ヴァージョン情報が出てくればOK！
vue --version
アンインストールのコマンド
＜メモ＞アンインストールのコマンドも追加します。
npm uninstall -g @vue/cli
Vueプロジェクトを作成する
TERMINAL上で、下記コマンドを入力。
cretate以降の文字列は、作りたいプロジェクト名を入れる。
vue create test-vuejs
下記選択は、「No」にする。
中国国内向けの注意書き。
”npmサーバーは中国外にあるため、ファイヤーウォール経由で遅くなります。中国向けnpmのtaobaoをインストールしますか？”といった内容です。
＜メッセージ内容＞
Your connection to the default npm registry seems to be slow.
Use https://registry.npm.taobao.org for faster installation? No
presetの選択がでてくるので、defaultを選択。矢印キーで選択できます。
インストールが終わったら、自動的に生成されたフォルダを表示する。
ls
サーバーを起動する
サーバー起動のコマンド
npm run serve
localとnetworkに書かれているurlにアクセスするとVueの画面が立ち上がります。
それが確認出来たらサーバー起動の成功です。
CLIが自動生成したファイルについて
node_modules:サードパーティのアプリが格納されている
gitignore:git用
babel.config.js:ESファイルにトランファイルする
package.json:アプリの設定が書かれたもの。jsonに基づいて実行される
public:静的ファイルを格納する場所
src:CSSやimageフォルダ、JSを格納
※assetsの中にCSSとimageフォルダを格納する。
本番環境のためにビルドする
ビルドコマンド
npm run build
distフォルダが生成される。
中身のソースコードはminファイル化されている。
生成されたdistフォルダを本番サーバーにアップする。
