カテゴリー
Vue.js/Nuxt.js

Vue.js/Nuxt.jsとは

Javascriptのフレームワーク

node.js、npmのインストールが必要

Vue.jsだけでも十分に利用できる。

でも、SPA(シングルページアプリケーション)なので、ルーティングがちょっと面倒。

そこで、Nuxt.jsを使えば、ルーティングが簡単に使える。

参考サイト:

Vue.js 公式サイト

Nuxt.js 公式サイト

カテゴリー
Laravel

Laravel Mix LaravelでJavaScriptを使う

確認環境:

Windows10、Laravel 7.30.4

フロントエンドにVue.js、バックエンドにLaravel という環境が使いやすい

Laravelはphpのフレームワーク

JavaScriptやCSSをがっつり使いたいなら、Laravel Mixを使う

Laravel MixはWebpackをベースとしている

Laravel Mixを使うには、Node.jsとnpmをあらかじめインストールしておく

webpack.mix.js を編集する

デフォルトは以下

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

CSSを使いたい場合

mix.styles([
    'public/css/vendor/normalize.css',
    'public/css/vendor/videojs.css'
], 'public/css/all.css');

JavaScriptを使いたい場合

mix.js('resources/js/app.js', 'public/js');

Laravel Mixを実行する

// 全タスク実行
npm run dev

// 全タスク実行を実行し、出力を圧縮
npm run production

コンパイルされたjs、cssが

/public/js、public/css に出力される

このファイルをバンドルファイルと呼ぶ

webpackが、複数のモジュールを1つにまとめたファイルを出力する(モジュールバンドラ)

参考サイト:
Laravel 7.x アセットのコンパイル(Mix)