基礎からメモ： Vue.js CH7-p231 Vue CLIの導入

Vue.js

Vue CLI のインストール

Node.js と npm はインスト済みとする。 次のコマンドで Vue CLI をグローバルインストール

$ npm install -g vue-cli

正しくインストールされていれば、次のコマンドでバージョン情報が表示される。

$ vue --version
2.9.6

プロジェクトの作成

プロジェクト作成のコマンド。

vue init [テンプレート名]　[プロジェクト名]
cd [プロジェクト名]
npm install

ここでの「テンプレート」とは、目的別に開発用にまとめられたパッケージの名前。「webpack」とか「webpack-simple」とか「browserify」などが用意されている。

github.com

新しいプロジェクトmy-appを作成する例

$ vue init webpack my-app

? Project name my-app  // プロジェクト名
? Project description A Vue.js project  // プロジェクトの説明
? Author xxxxx <xxxxx@example.com>
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm // パッケージ管理方法の選択. NPM や Yarn あるいは手動 

   vue-cli · Generated "my-app".

# Installing project dependencies ...
# ========================

------------ (略) --------------------------

# Project initialization finished!
# ========================

To get started:

  cd my-app
  npm run dev
  
Documentation can be found at https://vuejs-templates.github.io/webpack

最後のメッセージどおりプロジェクトフォルダへ移動し、開発用サーバを立ち上げる。

$ cd my-app
$ npm run dev

ブラウザから localhost:8080 にアクセスすると、こういう初期表示が出てくる。

f:id:pkdick:20200303152712p:plain

プロジェクトフォルダ配下の構成

この状態でmy-appディレクトリ配下はこういう構成。

$ tree ./my-app/ -L 1
./my-app/
├── README.md
├── build
├── config
├── index.html
├── node_modules
├── package-lock.json
├── package.json
├── src
└── static

先にブラウザから見えていたページは、この直下の index.html .

npm run buildというコマンドで運用モードとしてビルドするとdistディレクトリが作られ、ビルドされたファイルが中に入る。このdistディレクトリのみをホスティングサーバにアップロードすれば、ローカルからのビルドｰ>デプロイが完了する。

$ tree ./my-app/dist/ -L 1
./my-app/dist/
├── index.html
└── static

my-app直下にもstaticディレクトリがあるが、そこにあったファイル群はLoaderを介さずにそのままサーバに置く静的ファイルなど。 my-app/dist/の下にあるstaticディレクトリは、そういったファイルだけでなくビルドされたJSファイルやCSSファイルなどが格納される。

逆にビルドされる対象のファイルは、my-app/src/配下に置かれ、静的ファイルといっても画像やフォントはこのmy-app/src/assets/配下に置く仕様。

$ tree ./my-app/src/ -L 1
./my-app/src/
├── App.vue     // アプリケーション・ルートのコンポーネント
├── assets      // 画像やフォント
├── components  // 単一ファイルコンポーネント群
├── router      // Vue Routerを使う場合はここにルーティングの設定
└── main.js     // エントリポイントとなるJSファイル

デフォルトの状態のApp.vueはこういう内容の単一ファイルコンポーネント

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

my-app/src/components/HelloWorld.vueというファイル名のコンポーネントがVueのロゴの下に表示されている部分。