概要
Laravel-MixがVue.js3に対応したので、コンパイル通すまでやってみる。
環境はLaravel6.xのデフォルトとする。
環境
- macOS Mojave
- Node.js v14.4.0
- Laravel6.x
- Laravel-Mix 5.0.1
- Vue.js 3.0.0-rc.5
- TypeScript 3.9.7
laravel-mix-vue3のインストール
laravel-mix-vue3の手順通りにインストール。
$ npm install laravel-mix-vue3 vue-loader@next -D
or
$ yarn add laravel-mix-vue3 vue-loader@next -D
@vue/compiler-sfcのインストール
ここ手順書にないのだが、これがないと怒られる・・・
$ npm i @vue/compiler-sfc -D
or
$ yarn add @vue/compiler-sfc -D
cross-envのインストール
デフォルトだとcross-envがないって怒られるので、インストール
$ npm i cross-env -D
or
$ yarn add cross-env -D
resources/js/app.jsを編集
Vue.js2とは書き方が違うので注意
import { createApp } from 'vue';
import App from './App.vue'
createApp(App).mount('#app')
App.vueの作成
一旦文字を出すだけに。
App.vue
<template>
<div>
Hello
</div>
</template>
webpack.mix.jsを編集
webpack.mix.js
const mix = require('laravel-mix');
require("laravel-mix-vue3");
mix.vue3('resources/js/app.js', 'public/js')
コンパイルする
$ npm run dev
> @ dev /Users/Desktop/php-projects/hoge
> npm run development
> @ development /Users/Desktop/php-projects/hoge
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
Additional dependencies must be installed. This will only take a moment.
Running: npm install @ant-design-vue/babel-plugin-jsx vue@next --save-dev --production=false
Okay, done. The following packages have been installed and saved to your package.json dependencies list:
- @ant-design-vue/babel-plugin-jsx
- vue@next
98% after emitting SizeLimitsPlugin
DONE Compiled successfully in 2462ms 15:24:09
Asset Size Chunks Chunk Names
/js/app.js 411 KiB /js/app [emitted] /js/app
miyamotomasatonoMacBook-puro:modelphoto masato$ php artisan serve
Laravel development server started: http://127.0.0.1:8000
[Sun Aug 2 15:25:30 2020] 127.0.0.1:56171 [200]: /js/app.js
[Sun Aug 2 15:25:31 2020] 127.0.0.1:56180 [200]: /favicon.ico
色々モジュールが入って、成功する。
tsconfig.json も自動生成される！
app.jsの読み込み
resources/views/index.blade.phpを作成し、編集する
resources/views/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>
ルーティング設定
routes/web.php
Route::get("/", function () {
return view("index");
});
画面にアクセス
Dockerでもビルトインサーバーでもいいので、サーバー立ち上げ
(今回はビルトインサーバー使います)
$ php artisan serve
http://127.0.0.1:8000/にアクセス。
見れます。
試しにTypeScriptまで行ってみる
App.vueの編集
resources/js/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>
resources/js/app.jsをresources/js/app.tsにrename
$ mv resources/js/app.js resources/js/app.ts
必要なモジュールを入れる
$ npm i @types/webpack-env typescript ts-loader -D
or
$ yarn add @types/webpack-env typescript ts-loader -D
webpack.mix.jsの編集
webpack.mix.js
const mix = require('laravel-mix');
require("laravel-mix-vue3");
mix.vue3('resources/js/app.ts', 'public/js'); //app.tsに編集
コンパイル
$ npm run dev
> @ dev /Users/Desktop/php-projects/hoge
> npm run development
> @ development /Users/Desktop/php-projects/hoge
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
98% after emitting SizeLimitsPlugin
DONE Compiled successfully in 3311ms 22:26:23
Asset Size Chunks Chunk Names
/js/app.js 414 KiB /js/app [emitted] /js/app
コンパイルが通る・・・エディタ上ではエラーが出るけど一旦スルー
画面確認
$ php artisan serve
http://127.0.0.1:8000/にアクセス。
見れたー。