對於 Web 應用程序的開發，廣泛使用的工具是 vuejs，在本文中我們將了解如何在 Laravel 中安裝和使用它。 Vue.js 框架是 defiNITO 漸進式框架 因為它專門用於創建 HTML 視圖，並允許您輕鬆地與其他庫和項目的組件集成。
Vue.js 的成功也是因為選擇了 Laravel 建議將其作為前端框架，從而導致 2.0 版的發布。
第一步當然是在 Laravel 中創建一個新項目。 如果您的計算機上有一個，請使用它，或者您可以為本教程創建一個新的。
composer create-project laravel/laravel guide-laravel-vue項目啟動後，您需要安裝 npm 上癮。 為此，請在項目目錄中運行以下命令：
npm install安裝依賴項後，運行以下命令來構建資源並確保一切正常：
npm run dev命令 npm run dev 執行各種檢查和構建，特別是 Laravel Mix 編譯文件 resources/js/app.js 和文件 resources/css/app.css 在文件中 public/js/app.js e public/css/app.css.
完成後如果一切正常，您將看到如下內容：
準備好 Laravel 項目後，我們可以繼續安裝 Vue.js 3。為此，請在項目目錄中運行以下命令：
npm install --save-dev vue這將安裝 Vue.js 作為開發依賴項之一。 編譯資產後，您的生產 JavaScript 文件將是獨立的，因此您只需安裝 Vue.js 作為開發依賴項。
為確保 Vue 3 已正確安裝，請打開文件 package.json （存在於項目根目錄中）並蒐索 "vue" 在該部分 "devDependencies":
// package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"axios": "^0.21",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"vue": "^3.2.37"
}
}可以看到，版本號表示已經安裝了Vue.js 3。
在您的 welcome.blade.php 文件中放置以下代碼：
<div id="vue-app">
{{ text }}
</div>
<script>
window.vueApp = new Vue({
el: '#vue-app',
data: {
text: 'Hello World from Vue!'
}
});
</script>如您所見，我們已經創建了一個元素 div 同 id “vue-app”。 在 script 元素內，我們創建了一個 Vue 實例，在其中我們將一個對像傳遞給構造函數，該對象允許我們 defi在我們的例子中，完成一些應用程序參數，例如數據和行為：
div defi在html中完成一旦對像被創建， Vue 獲得 div 同 id vue-app 並負責替換佔位符 {{ text }} 包含在數據對像中的值。 當然，這個對象可以包含多個屬性，甚至是不同的類型：數字、數組和其他嵌套對像都是有效的
除了這個替換之外，Vue 還激活了它的引擎並使應用程序響應，即對文本屬性的任何更改都會導致 HTML 中相應元素的即時更新。
要繼續進行第二次試用，您首先需要實例化該應用程序以創建一個新組件。 你打開 resources/app.js (o resources/js/app.js) 並更新其內容如下：
// resources/app.js
require('./bootstrap');
import { createApp } from 'vue';
import HelloVue from '../components/HelloVue.vue';
createApp({
components: {
HelloVue,
}
}).mount('#app');在這個文件中，我們創建了一個新的 Vue.js 實例，為此我們需要一個名為 HelloVue.vue 的 Vue 組件。 了解更多信息 查閱官方文檔 .
創建一個新文件 resources/components/HelloVue.vue 並輸入以下代碼：
// resources/components/HelloVue.vue
<template>
<h1>Hello Vue!</h1>
</template>
<script>
export default {
name: 'HelloVue'
}
</script>我們剛剛創建的文件是一個基本的 Vue.js 組件，用於打印 Hello Vue! 如何 header1 在頁面上。 最後，打開 webpack.mix.js 項目根目錄中的文件並更新其內容，如下所示：
// webpack.mix.js
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.vue({
version: 3,
})
.postCss('resources/css/app.css', 'public/css', [
//
]);在這個文件中，方法調用 .vue() 將編譯任何 Vue.js 代碼並將其捆綁到生產 JavaScript 文件中。 該函數接受一個對象，您可以 defi完成您正在使用的 Vue.js 版本。
編輯文件後 webpack.mix.js 你需要編譯javascript代碼。 為此，我們再次運行命令 npm run dev.
最後，要在操作上嘗試 Vue，請打開文件 resources/views/welcome.blade.php 並輸入以下代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Laravel Vue</title>
<script src="{{ asset('js/app.js') }}" defer></script>
</head>
<body>
<div id="app">
<hello-vue />
</div>
</body>
</html>該代碼與之前創建的組件一起將生成一條視頻消息 你好！，由於 Vue.js 實例被安裝在一個 HTML 元素上 id app.
使用運行您的應用程序 php artisan serve, 然後在您喜歡的瀏覽器中打開它。
Ercole Palmeri
你也可能對此有興趣 ...
Casaleggio Associati 發布了義大利電子商務年度報告。題為「人工智慧商務：人工智慧電子商務的前沿」的報告...