現在プロジェクトを進めているのですが、vueを導入する方法は普通にSPAで作成する方法とは若干異なるのでまとめていきます。
まず、やることとしては以下の３つです。
- vue.jsの導入
- vue-routerの導入
- 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を編集します。
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,
});
以上です。
0件のコメント