Laravel6でvue.jsを利用する
Laravel6だとvue.jsが自動で生成されないのでvue.jsを利用するための手順を記載。
環境
#cat /etc/centos-release
CentOS Linux release 7.7.1908 (Core)
Laravelプロジェクトの作成
ここではvueというプロジェクト名で作成してます
※Laravelの構築手順はこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
## ディレクトリ作成 sudo mkdir /var/www/html/vue ## プロジェクト作成 composer create-project laravel/laravel /var/www/html/vue --prefer-dist ## 権限変更 sudo chmod 755 /var/www/html/vue ## 移動 cd /var/www/html/vue ## Laravel6起動 php artisan serve --host 0.0.0.0 |
とりあえず、ブラウザから http://プライベートIP:8000 にアクセスにして下記の画面が表示されることを確認
laravel/uiをインストール
公式パッケージのインストールを実行
|
1 2 |
## インストール composer require laravel/ui |
これで、下記のコマンドを実行すればVueの利用が可能になります。
※node.jsのインストールはこちら
|
1 2 3 4 5 6 |
## vue生成 php artisan ui vue ## npmを実行 npm install npm run dev |
npm install
package.jsonというファイルの記述に従い、必要なJavaScriptのパッケージをダウンロードしたりインストールするためのコマンド
npm run dev
上記で入手したものをコンパイルするためのコマンド
確認
/var/www/html/vue/resources/views内のwelcome.blade.phpに下記のコードを追加
|
1 2 3 4 |
<div id="app"> <example-component></example-component> </div> <script src="{{mix('js/app.js')}}"></script> |
ブラウザから http://プライベートIP:8000 にアクセスにして
Example Component
I’m an example component.
が表示されることを確認します
-
前の記事
CentOs8にReact.jsをインストールしてHello Worldまでしてみる 2019.11.14
-
次の記事
Vue.js watchを使用してデータを監視するサンプルコード 2019.11.15