Laravel8.xとVue.js3でToDoアプリを作成 2 ~Vue.js導入~
はじめに
Laravel8.xとVue.js3を使用してToDoアプリを作成の第二弾です!
Laravelの環境構築はこちらです。
今回はVue.jsを導入をしていきたいと思います。
Vue.js3をインストールしてTypeScriptを使用できるようにする所までが今回のゴールです。
構築
LaravelのView部分をVue.jsに置き換えて作成をしていきます。
フロントエンド
Vue.js3
TypeScript
バックエンド
PHP7.4.1
Laravel8.x
データベース
MYSQL8.0
インフラ
Docker
docker-compose
Nginx
Vue.js導入
各種インストール
Laravel8.xではlaravel-mix6
がデフォルトでインストールされているため、Vue.js3とTypeScriptのインストールを行います。
まずは下記コマンドを上から順番に実行します。
docker-compose run app npm install vue@next -D
docker-compose run app npm install vue-loader@next -D
docker-compose run app npm install @vue/compiler-sfc -D
docker-compose run app npm install @types/webpack-env typescript ts-loader -D
Vue.js設定
必要なライブラリ等はインストールできたので、設定をしていきます。
まずwebpack.mix.jsの設定をしていきます。
const mix = require('laravel-mix');
mix.ts('resources/js/app.ts', 'public/js')
.css('resources/css/app.css', 'public/css').vue();
});
app.js
をapp.ts
に変更します!
cd src/resources/js
mv app.js app.ts
tsconfig.json
ファイルを作成します。
cd src
touch tsconfig.json
作成されたtsconfig.json
ファイルを書き換えます。
{
"compilerOptions": {
"outDir": "./built/",
"sourceMap": true,
"strict": true,
"noImplicitReturns": true,
"noImplicitAny": true,
"module": "es2015",
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"moduleResolution": "node",
"target": "es6",
"lib": [
"es2016",
"dom"
]
},
"include": [
"resources/js/**/*"
]
}
次にresources/js
ディレクトリ内に@types
ディレクトリを作成します。
cd src/resources/js
mkdir @types
@types
ディレクトリ内にshims-vue.d.ts
ファイルを作成します。
cd @types
touch shims-vue.d.ts
shims-vue.d.ts
編集します。
declare module "*.vue" {
import {defineComponent} from "vue";
const component: ReturnType<typeof defineComponent>;
export default component;
}
設定自体は以上となります!!
Vue.js確認
ここからはVue.jsが設定できているのか画面に表示して確認したいと思います。
まず先程名前を変更したapp.ts
を編集します。
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app')
import App from './App.vue';
の所でエラーが出ているかと思いますが、
後で解消させるため、一旦無視して置きます。
次にApp.Vue
を作成します。
touch App.Vue
編集していきます。
<template>
<div>{{ hello }}</div>
</template>
<script lang="ts">
import { ref } from "vue";
export default {
setup() {
const hello = ref(
"Hello From TypeScript"
)
return {
hello
}
},
};
</script>
次にindex.blade.php
を作成して編集します。
cd src/resources/views
touch index.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="js/app.js"></script>
</body>
</html>
次にindex.blade.php
をルートパスにします。
web.php
を書き換えます。
<?php
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
return view('index');
});
ここまでできたらビルドをします。
docker-compose run app npm run dev
下記のような表示がでればapp.js
とapp.css
が作成されています。
最後に画面の確認です。
下記コマンドを入力後、http://localhost:80にアクセスしてHello From TypeScript
がでたら成功です!!
docker-compose up -d
次回
次回はDBの作成とVue.jsへデータを送る所まで行いたいと思います!!
ここまでみていただきありがとうございました!!
Discussion