【保存版】laravel + vue.jsが動かないときのチェックポイント

パン田@現役エンジニア

きょうはlaravel + vue.jsが動かない時のチェックポイントを教えるよ！

vue.jsの入門者、初心者の人が始めてみたらvue.jsが動かない事がよくあります。

今回はそのチェックポイントをすべて教えます。
この記事をすべてチェックすれば必ずあなたのvue.jsは動きます！

※ぼくはlaravel + vue.jsで始めたから、そのへんも。

vue.jsが動かない！チェックポイントまとめ

どれが原因か分からないと思うので、すべて順番にチェックしてくださいね！

node.jsはインストールされてる？

node -v
v11.14.0

node -vでバージョンは表示されますか？

表示されなければnode.jsをインストールしましょう

npmはインストールされてる？

npm -v
6.9.0

npm -vでバージョンは表示されますか？
もしされないならインストールしましょう

まぁ、node.jsをインストールすると勝手にインストールされるんですけど。

package.jsにvueは入ってる？

laravelのプロジェクトルートにあるpackage.jsonにvueは入ってる？

# laravelのプロジェクトルートにある package.jsonファイル

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.19.0",
        "bootstrap": "^4.0.0",
        "cross-env": "^5.2.0",
        "jquery": "^3.2",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.5",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "tar": "^4.4.8",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    },
    "dependencies": {
        "node-sass": "^4.12.0",
        "quill": "^1.3.6"
    }
}

laravelは5.4か5.3くらいから標準で入ってるらしいです。

npm installした？

laravelのルートディレクトリで↓を実行します。

npm install

npm installするとpackage.jsonに書かれたパッケージがインストールされます。
あと古いやつをアップデートしてくれるぽい？

ぼくが詰まってたときはこれをやって解決しました。

npm installしてエラーでたらnpm audit fixした？

なんかパッケージに致命的なバグがあるとエラーが出たりする。vue.jsが動かないのとは直接関係がないと思うけど、やっとくべし

僕のときはaxios1.8.0が致命的なバグがあったのがひっかかってた。

laravel mix（タスクランナー）は動かした？

ルートディレクトリで↓のどっちかを実行してくださいね。

npm run dev

npm run watch

laravel mixについてざっくり説明すると

resource/jsディレクトリ
resource/cssディレクトリ

のファイルをコンパイルして、publicなディレクトリに生成したファイルを設置してくれます。

minifyとかもやってくれます。

public/js/app.jsはある？

npm run devでエラーしてなければここにapp.jsファイルができあがる。

ちなみにファイル名はlaravelプロジェクトルートディレクトリのwebpack.mix.jsに定義されているよ。

app.jsにはちゃんとnew Vueとか require(‘vue’)とか書いてある？

resource/js/app.jsはこんな感じになってる？

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i);
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));

// Vue.component('example-component', require('./components/ExampleComponent.vue').default);


/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello vue.js!'
    },
});

requireされてたり、new Vue(…)になってる？

viewファイル（blade）にcsrf_token入ってる？

なんか必要らしいです。

headタグの中にある必要があります。

<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>Laravel</title>

        <link href="{{ mix('css/app.css') }}" rel="stylesheet" type="text/css">
    </head>
    <body>
    	<!-- コンポーネントの配置 -->
        <div id="app" style="margin: 30px;">
            <h2>TODOリスト</h2>
            <p v-cloak>@{{ message }}</p>
        </div>
    <script src="{{ mix('js/app.js') }}"></script>
    </body>
</html>

viewファイルにid=”app”は書いてある？

bladeファイルにid=”app”は入ってる？ちなみに書くならdivタグがいいと思うよ。

bodyタグの終わり直前で app.jsを読み込んでる？

headタグではダメ。 bodyタグの閉じタグの直前に書くこと。

ちなみにmix(‘js/app.js’)でも asset(‘js/app.js’)でもどっちでもいいよ。

とまぁこんな感じです。

きっと動いたはず。

最後にフォローを！

役に立ったらフォローしてもらえると嬉しいな。

あと、エンジニアの年収を上げる方法やフリーの営業法をツイートしてるんでフォローしてくださいっ！！

今はRubyの仕事をしてます。

働いてるのは週に2日だけですが、それでも年収は400万近くまでいきます。プログラミングは安定して、そこそこの金額を稼げるいい仕事です実務経験が5年くらいあれば誰でもできるので駆け出しエンジニアさんも夢があるんじゃないかと。 — ぱんだ@週2日エンジニア/フリーランス (@panda_program_) March 17, 2019

フォローは↓からですよ！
Follow @panda_program_

【保存版】laravel + vue.jsが動かないときのチェックポイント

vue.jsが動かない！チェックポイントまとめ

node.jsはインストールされてる？

npmはインストールされてる？

package.jsにvueは入ってる？

npm installした？

npm installしてエラーでたらnpm audit fixした？

laravel mix（タスクランナー）は動かした？

public/js/app.jsはある？

app.jsにはちゃんとnew Vueとか require(‘vue’)とか書いてある？

viewファイル（blade）にcsrf_token入ってる？

viewファイルにid=”app”は書いてある？

bodyタグの終わり直前で app.jsを読み込んでる？

最後にフォローを！

管理人

カテゴリー

vue.jsが動かない！チェックポイントまとめ

node.jsはインストールされてる？

npmはインストールされてる？

package.jsにvueは入ってる？

npm installした？

npm installしてエラーでたらnpm audit fixした？

laravel mix（タスクランナー）は動かした？

public/js/app.jsはある？

app.jsにはちゃんとnew Vueとか require(‘vue’)とか書いてある？

viewファイル（blade）にcsrf_token入ってる？

viewファイルにid=”app”は書いてある？

bodyタグの終わり直前で app.jsを読み込んでる？

最後にフォローを！

RECOMMENDこちらの記事も人気です。

laravelのnpm run devでエラー|Node Sass co…

vue.jsのcomputedとmethodsの違いまとめ（算出プロパテ…

【laravel】1対多のbelongsTo(hasMany)まとめ。s…

laravel-adminで多対多(belongsToMany)を使う。…

管理人

カテゴリー