1. 開発環境のセットアップ

Vue.jsフレームワークを利用した開発を始めるにあたり、まずはNode.js環境とVue CLI（コマンドラインインターフェース）を準備します。

# 1. Node.jsのインストール
# 公式サイト（https://nodejs.org/）から推奨版をインストールします。

# 2. パッケージマネージャー（cnpm）の導入
# インストール速度向上のため、ミラーサイトを利用した設定を行います。
npm install -g cnpm --registry=https://registry.npmmirror.com

# 3. Vue CLIのグローバルインストール
cnpm install -g @vue/cli

# インストール中にエラーが発生した場合は、キャッシュを強制クリアして再試行してください。
npm cache clean --force

2. プロジェクトの新規作成

プロジェクトを管理するディレクトリを作成し、Vue CLIを用いてボイラープレートを生成します。

# 作業ディレクトリの作成
mkdir project_root && cd project_root

# Vueプロジェクトの初期化
vue create web_client

3. 推奨されるディレクトリ構成

拡張性とメンテナンス性を考慮し、プロジェクト構造を以下のように整理します。不要な初期ファイルは削除し、独自の構成を適用します。

├── web_client
    ├── public/                 # 公開リソース
        ├── favicon.ico         # ファビコン
        └── index.html          # エントリHTML
    ├── src/                    # ソースコード
        ├── assets/             # 静的アセット管理
            ├── styles/         # CSS/SCSSファイル
                └── reset.css   # グローバルリセットスタイル
            ├── scripts/        # 共通JavaScript関数
                └── constants.js # 外部接続先等の定数管理
            └── images/         # 画像リソース
        ├── components/         # 共有コンポーネント
        ├── views/              # ページレベルのコンポーネント
        ├── App.vue             # ルートコンポーネント
        ├── main.js             # アプリケーション起動スクリプト
        ├── router/             
            └── index.js        # ルーティング定義
        └── store/              
            └── index.js        # 状態管理（Vuex等）
    ├── vue.config.js           # Vueのビルド設定
    └── package.json            # 依存関係定義

4. 基本コンポーネントとルーティングの設定

プロジェクトの基盤となる最小限のコード構成を実装します。

App.vue

ルートコンポーネントは、ルーティングの結果を表示するためのシンプルな構造にします。

<template>
    <div id="app">
        <router-view/>
    </div>
</template>

router/index.js

基本となるパスの設定と、履歴管理モード（history）を定義します。

import Vue from 'vue'
import Router from 'vue-router'
import MainView from '../views/MainView.vue'

Vue.use(Router)

const appRoutes = [
    {
        path: '/',
        name: 'Main',
        component: MainView
    },
    {
        path: '/index',
        redirect: '/'
    }
]

export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: appRoutes
})

5. グローバル設定の適用

プロジェクト全体で利用するスタイルや定数を定義し、アプリケーション全体から参照できるようにします。

reset.css

ブラウザ間の差異を無くし、レイアウトを制御しやすくするための初期設定です。

/* 共通のリセットスタイル */
body, h1, h2, h3, p, ul, li, form, input {
    margin: 0;
    padding: 0;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

constants.js

APIのベースURLなど、環境によって変化する可能性のある値を定義します。

export default {
    API_HOST: 'http://api.example.com:8000'
}

main.js

作成した設定をVueインスタンスにインジェクションします。

import Vue from 'vue'
import App from './App.vue'
import router from './router'

// スタイルの読み込み
import '@/assets/styles/reset.css'

// グローバル定数の設定
import constants from '@/assets/scripts/constants'
Vue.prototype.$config = constants

new Vue({
    router,
    render: h => h(App)
}).$mount('#app')

// 各コンポーネント内からは this.$config.API_HOST でアクセス可能