Laravel 是一個流行的 PHP Web 開發框架。它可以讓開發人員更加高效地編寫代碼。
Laravel 自帶 Vue,這使得開發人員可以更加容易地在 Laravel 中使用 Vue。在 Laravel 5.5 之后, Vue 已經是 Laravel 的強制依賴。這意味著你可以更加輕松地集成 Vue 到 Laravel 中。
npm install
首先,你需要安裝 NPM 依賴。這些依賴包括 Vue、Vue-Router 以及其他必需的依賴項。
<div id="app"></div>
<script src="{{ asset('js/app.js') }}"></script>
你可以在 Laravel 視圖中定義 Vue 入口點。
// resources/js/app.js
require('./bootstrap');
import Vue from 'vue';
import router from './router';
const app = new Vue({
el: '#app',
router
});
然后,在 app.js 文件中定義 Vue 實例,并將其附加到你在視圖中定義的app
元素上。在這個例子中,我們還導入了 Vue-Router,并將其傳遞給 Vue 實例的router
選項。
最后,你需要使用 Laravel Mix 來編譯 JavaScript 文件。在 package.json 文件中,添加一個scripts
命令如下:
"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"
}
現在,你已經成功地將 Laravel 和 Vue 結合在了一起。