MDBootstrap Vueことはじめ

プロジェクトのクローン

# ユーザーディレクトリ直下にワークスペースを作成
cd && mkdir GitHub && cd GitHub

# git cloneする
git clone https://github.com/mdbootstrap/Vue-Tutorial-Agenda-App.git

インストールと起動

# 作業ディレクトリに移動
cd ~/GitHub/Vue-Tutorial-Agenda-App/getting-started/start-here

# npmがインストールされているかチェック
npm -v

# 依存関係のインストール
npm install

# サーバーの立ち上げ
npm start

アクセスしてみる

http://localhost:8080/

Vueプロジェクトの構造について

構造

.
├── License.pdf
├── README.md
├── build
├── config
├── index.html
├── node_modules
├── package-lock.json
├── package.json
├── src
│   ├── App.vue
│   ├── assets
│   └── main.js
└── static

主要な要素

要素	役割
node_modules	Vueをビルドするために必要なライブラリー
src	アプリケーションのソースコード
assets	画像やアイコンなどの静的アセットが配置される
App.vue	ルートコンポーネント（他の全てのコンポーネントがネストされる）
main.js	App.vueコンポーネントをレンダリングし、DOMにマウントする
index.html	アプリのメインファイル

• コンポーネントとは、構成要素のこと

App.vueのシングルファイルコンポーネント

1. Template
2. Scripts
3. Styles

=> 詳しくは次の投稿で解説

参考

Getting started - Material Design for Bootstrap