現在プロジェクトを進めているのですが、vueを導入する方法は普通にSPAで作成する方法とは若干異なるのでまとめていきます。

まず、やることとしては以下の3つです。

  1. vue.jsの導入
  2. vue-routerの導入
  3. vuetifyの導入

準備

以下のツールがインストールされていることを確認してください。

  • node.js(npm or yarn)
  • composer

Laravelプロジェクトはすでに作成されていることを前提とします。

vue.jsの導入

まずはvue.jsの導入です。

最初に以下のコマンドでvue.jsをインストールします。

composer require laravel/ui
php artisan ui vue

下のコマンドに–authをつけると認証機能がつきますが、今回は不要なのでつけません。

vue-routerの導入

次にvue-routerを導入していきます。

まずは以下のコマンドでvue-routerをインストールします。

npm install vue-router

次に、vueのコンポーネントを読み込むベースの設定をしていきます。

まず、/resource/views/index.blade.phpを作成して以下のように書き込みます。

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
 
<head>
    <meta charset="UTF-8">
    <title>サンプル</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <script src="{{ asset('js/app.js') }}" defer></script>
</head>
 
<body>
    <div id="app">
        <router-view />
    </div>
</body>
 
</html>

次にroutes/web.phpにwebのアクセスは全てindex.blade.phpを参照するように修正します。

Route::get('{any}', function () {
    return view('index');
})->where('any', '.*');

次にコンポーネントを作成します。

vue.jsを導入した際に/resource/js/components/ExampleComponent.vueが作成されているので、これをTop.vue,Login.vueなど作成します。

次にvue-routerの設定をしていきます。

まず、/resource/js/routes/router.jsファイルを作成して以下のように設定します。

import Vue from "vue";
import VueRouter from "vue-router";
 
Vue.use(VueRouter);
 
import top from "../components/Top.vue";
import login from "../components/Login.vue";
 
const router = new VueRouter({
    mode: "history",
    routes: [
        {
            path: "/",
            name: "top",
            component: top
        },
        {
            path: "/login",
            name: "login",
            component: login
        }
    ]
});

 export default router;

最後に/resource/js/app.jsを編集します。

Vue.component(‘example-component’, require(‘./components/ExampleComponent.vue’).default);を削除して、以下のように編集します。
import router from "./routes/router";

const app = new Vue({
    el: '#app',
    router: router,
});

npm run devしてファイルを作成してアクセスすると反映されていることがわかります。

vuetifyの導入

次に以下のコマンドでvuetifyを導入します。ついでにmdiアイコンも追加します。

npm install vuetify
npm install sass sass-loader fibers deepmerge -D
npm install @mdi/font -D

次に/resource/js/plugins/vuetify.jsを作成して以下のように編集します。

import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/dist/vuetify.min.css'
import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'mdiSvg',
  },
});

resources/sass/app.scssに以下のコードを追加します。

@import '~@mdi/font/css/materialdesignicons.min.css';

最後に/resource/js/app.jsを以下のように編集します。

import router from "./routes/router";

import vuetify from './plugins/vuetify'

const app = new Vue({
    el: '#app',
    router: router,
    vuetify: vuetify,
});

以上です。

カテゴリー: JavaScriptPHP

0件のコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です