Laravel-MixがVue.js3に対応した(TypeScript導入まで)

# 概要

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](https://www.npmjs.com/package/laravel-mix-vue3)の手順通りにインストール。


```console
$ npm install laravel-mix-vue3 vue-loader@next -D
 
or
 
$ yarn add laravel-mix-vue3 vue-loader@next -D
```

## @vue/compiler-sfcのインストール

ここ手順書にないのだが、これがないと怒られる・・・

```console
$ npm i @vue/compiler-sfc -D

or 

$ yarn add @vue/compiler-sfc -D
```

## cross-envのインストール

デフォルトだとcross-envがないって怒られるので、インストール

```console
$ npm i cross-env -D

or 

$ yarn add cross-env -D
```

## resources/js/app.jsを編集

Vue.js2とは書き方が違うので注意

```js
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でもビルトインサーバーでもいいので、サーバー立ち上げ
(今回はビルトインサーバー使います)

```console
$ php artisan serve
```

[http://127.0.0.1:8000/](http://127.0.0.1:8000/)にアクセス。

[![Image from Gyazo](https://i.gyazo.com/b8b14cd56b9b942a3198b013797007bd.png)](https://gyazo.com/b8b14cd56b9b942a3198b013797007bd)

見れます。


## 試しに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

```console
$ mv resources/js/app.js resources/js/app.ts
```

### 必要なモジュールを入れる

```console
$ 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に編集
```

### コンパイル

```console
$ 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
```

コンパイルが通る・・・エディタ上ではエラーが出るけど一旦スルー

### 画面確認

```console
$ php artisan serve
```

[http://127.0.0.1:8000/](http://127.0.0.1:8000/)にアクセス。

[![Image from Gyazo](https://i.gyazo.com/927c9a1649371b4409500b85ceb8a47e.png)](https://gyazo.com/927c9a1649371b4409500b85ceb8a47e)

見れたー。

## 参考

[laravel-mix-vue3](https://www.npmjs.com/package/laravel-mix-vue3)