在本教程中，我將向大家展示如何使用 Laravel + Vue 3 使用 typescript 和 Vite 設(shè)置你自己的單頁應(yīng)用程序。
這是在 Laravel 項(xiàng)目中添加 PWA 的手動(dòng)方法。我們不會(huì)使用 InertiaJS 或其他類似的東西，我們也不會(huì)混合使用。我們將手動(dòng)實(shí)現(xiàn)我們自己的 VueJS 前端。
第 1 步：讓我們創(chuàng)建我們的 Laravel 項(xiàng)目
composer create-project laravel/laravel laravel-vue-manual
第 2 步：設(shè)置前端
在我們的 laravel 項(xiàng)目中，讓我們使用 yarn 運(yùn)行一個(gè)命令，并選擇 vue 和 typescript。
yarn create vite
將項(xiàng)目名稱設(shè)置為：FrontEndApp
選擇：Vue
選擇：TypeScript
然后轉(zhuǎn)到我們的FrontEndApp目錄并運(yùn)行yarn或yarn install安裝依賴項(xiàng)。
配置 Vite
讓我們配置我們的 vite 配置FrontEndApp\vite.config.ts
import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; export default ({ mode }) => { const isDevelopment = mode === "development"; return defineConfig({ server: { port: 3000, }, build: { outDir: "./../public/app", }, base: isDevelopment ? "/" : "/app/", plugins: [vue()], }); };
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
然后讓我們更改build腳本FrontEndApp\package.json，這樣每次我們構(gòu)建它時(shí)都會(huì)替換以下文件public/app：
{ ... "scripts": { "dev": "vite", "build": "vue-tsc --noEmit && vite build --emptyOutDir", "preview": "vite preview" }, ... }
現(xiàn)在，如果我們?cè)贔rontEndApp中運(yùn)行yarn build，它應(yīng)該在laravel項(xiàng)目的根目錄中的public文件夾中創(chuàng)建一個(gè)名為 app 的文件夾。
第 3 步：設(shè)置 Laravel 路由
讓我們?cè)O(shè)置我們的 laravel 路由，以便我們可以訪問我們剛剛創(chuàng)建的文件。
讓我們編輯這個(gè)文件 routes\web.php
<?php
use Illuminate\Support\Facades\Route; Route::get('/', function () { return view('welcome'); }); Route::get('/app/{any}', function () { $path = public_path('app/index.html'); abort_unless(file_exists($path), 400, 'Page is not Found!'); return file_get_contents($path); }) ->name('FrontEndApp');
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
現(xiàn)在，如果我們http://127.0.0.1:8000/app在瀏覽器中打開，我們現(xiàn)在可以看到我們的應(yīng)用程序已啟動(dòng)。
第 4 步：設(shè)置腳本
我們將在我們的根項(xiàng)目目錄中添加一個(gè)開發(fā)包，并同時(shí)調(diào)用它。我們用它來一次運(yùn)行 2 個(gè)或更多命令。
安裝：
yarn add -D concurrently
如果我們想要自動(dòng)工作，不想每次使用時(shí)都重新構(gòu)建frontednapp，我們要做的是在package.json項(xiàng)目的根目錄中添加一個(gè)新腳本。
{ ... "scripts": { ... "front:serve": "cd FrontEndApp && yarn dev", "front:build": "cd FrontEndApp && yarn build", "serve": "concurrently \"php artisan serve --port=8080\" \"yarn front:serve\"", "deploy": "yarn setup && yarn front:build && php artisan migrate" }, ... }
這樣， running yarn serve將同時(shí)運(yùn)行 127.0.0.1:8080 和 localhost:3000。你現(xiàn)在可以同時(shí)使用這兩個(gè)項(xiàng)目。
完成 FrontEndApp 的工作后，你可以運(yùn)行 yarn deploy 以構(gòu)建我們的前端。
結(jié)論
我相信這也是大家可以在 laravel 項(xiàng)目中添加 pwa 的一種方式，這樣你就可以將它們保存在一個(gè)項(xiàng)目中。
考慮到這一點(diǎn)，你可以添加routes到你的 FrontEndApp 項(xiàng)目中，還可以添加狀態(tài)管理器PiniaJA，例如 等等。
?? 好書推薦
《Vue.js 快速入門實(shí)戰(zhàn)》
【內(nèi)容簡(jiǎn)介】
Vue.js 快速入門實(shí)戰(zhàn)以Vue.js的知識(shí)點(diǎn)為基礎(chǔ)，結(jié)合TypeScript的使用，循序漸進(jìn)地介紹了Vue.js 3.0（簡(jiǎn)稱Vue3）的知識(shí)點(diǎn)和實(shí)戰(zhàn)技巧，可以幫助零基礎(chǔ)的讀者掌握獨(dú)立開發(fā)項(xiàng)目和部署項(xiàng)目上線的技術(shù)。全書共14章，包括Vue.js概述、搭建開發(fā)環(huán)境、Vue.js組合式API、Vue.js的模板語法、Vue.js的計(jì)算屬性和偵聽器、Vue.js中class和style的綁定、Vue.js的表單開發(fā)、Vue.js的組件開發(fā)、Vue.js的網(wǎng)絡(luò)請(qǐng)求、Vue.js的狀態(tài)管理、Vue.js的路由管理、Vue的項(xiàng)目部署、在線招聘網(wǎng)站開發(fā)實(shí)戰(zhàn)以及招聘網(wǎng)站后臺(tái)管理系統(tǒng)開發(fā)實(shí)戰(zhàn)。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.chinatradebeam.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
