atomjoy/vueon

Vue 自定义目录在 Laravel 中

维护者

详细信息

github.com/atomjoy/vueon

源代码

问题

安装次数: 3

依赖者: 0

建议者: 0

安全: 0

星标: 0

关注者: 1

分支: 0

开放问题: 0

v1.0.2 2022-12-07 08:43 UTC

MIT 5b857d3b972892f20a91d9ef6109366dbef13edc

  • Atomjoy <atomjoy.official.woop@gmail.com>

This package is not auto-updated.

Last update: 2024-09-18 01:19:07 UTC

README

在 Laravel 中选择目录 (vue-project) 安装 Vue 和 Vite

Laravel 项目

composer create-project laravel/laravel:^9.0 demo

添加 atomjoy/vueon 包

cd demo
composer require atomjoy/vueon 1.0.*
composer update
composer dump-autoload -o

在 Laravel 中创建 Vue 项目

npm init vue@latest
cd vue-project
npm install
cd ..

Vite 配置

# Laravel root dir
php artisan vendor:publish --tag=vueon-config --force

添加路由

<?php
// Laravel routes
Route::get('/welcome', function () {
    return view('welcome');
});

// Laravel login auth redirect url
Route::get('/login', function () {
    return view('vueon::vue');
})->name('login');

// Vue all routes
Route::fallback(function () {
    return view('vueon::vue');
});

运行应用程序

demo/vue-project

cd vue-project
# Vue build
npm run build
# Clear Laravel view cache
php artisan view:clear
# Php Laravel server
php ../artisan serve

清除视图缓存（开发模式）

如果浏览器不显示当前页面或显示加载 index.[hash].js 文件的错误，请清除 Laravel 中的视图缓存并重新启动本地服务器。

php artisan view:clear
php artisan serve

或者关闭 Laravel 中的视图缓存（开发模式）

在 config/view.php 文件中添加

<?php
return [
    'cache' => false,
    // ...
]

Vue 包安装

cd vue-project
npm install --save-dev axios
npm install --save-dev vue-i18n@9
npm install --save-dev @googlemaps/js-api-loader