Laravel vue 環境のデプロイメント
このチュートリアルでは、Laravel での vue のデプロイメントについて紹介します。Laravel には、Vue ライブラリを使用して最新の JavaScript の記述を簡単に開始できるようにするための基本的なスキャフォールディングがいくつか含まれています。 Vue は、コンポーネントを使用して強力な JavaScript アプリケーションを構築するための表現力豊かな API を提供します。 Laravel Mix を使用すると、JavaScript コンポーネントをブラウザで使用できる JavaScript ファイルに簡単にコンパイルできます。
関連する推奨事項: 最新の 5 つの Laravel ビデオ チュートリアル 、最新の 5 つの vue.js ビデオ チュートリアルのセレクション
laravel を作成する
#まず、コンポーザーが必要で、次に laravel が必要になります。コマンドcomposer create-project --prefer-dist laravel/laravel blogを実行して、新しいlaravelプロジェクトを作成します(laravelの具体的な作成方法については、公式Webサイトにアクセスしてください)。Hello world!
npm install --registry=https://registry.npm.taobao.org
npm install vue-router --save-dev
<template> <div> <h1>Hello World!</h1> </div> </template> <script> export default{ data(){ return { } } } </script>
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) export default new VueRouter({ saveScrollPosition: true, routes: [ { name: "hello", path: '/', component: resolve =>void(require(['../components/HelloComponent.vue'], resolve)) }, ] })
<template> <div> <h1>Hello</h1> <router-view></router-view> </div> </template> <script> export default{ data(){ return { } } } </script>
require('./bootstrap'); window.Vue = require('vue'); import Vue from 'vue' import App from './hello.vue' import router from './router/hello.js' const app = new Vue({ el: '#app', router, render: h=>h(App) });
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>Hello</title> </head> <body> <div id="app"></div> <script src="{{ mix('js/manifest.js') }}"></script> <script src="{{ mix('js/vendor.js') }}"></script> <script src="{{ mix('js/hello.js') }}"></script> </body> </html>
Route::view('/hello','/hello');
mix.js('resources/assets/js/app.js', 'public/js') .js('resources/assets/js/hello.js', 'public/js') .extract(['vue', "vue-router", "axios"]) .sass('resources/assets/sass/app.scss', 'public/css');
最後に
#npm を実行すると、Write EIO エラーが表示されることがあります。 , おそらくコーディングの問題が原因です。このとき、管理者としてコマンド ライン ファイルを実行するか、chcp 850 を実行してアクティブなコード ページ番号を設定できます。laravel で Vue をデプロイするチュートリアルは基本的に終了です。 Vue の作成について詳しく知りたい場合は、コンポーネントの情報については、Vue のドキュメントを参照してください。以上がLaravelでvueをデプロイする方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。