Laravel 为新项目初始化 vuejs
Posted
技术标签:
【中文标题】Laravel 为新项目初始化 vuejs【英文标题】：Laravel initializing vuejs for new project 【发布时间】：2021-06-09 12:58:27 【问题描述】：安装全新安装的Laravel 后，我安装了VueRouter，并在实现了如下所示的简单代码后，我无法使用VueJs，并且我在终端中没有收到任何错误：
命令没有显示任何错误，我从 Laravel mix 得到 build successful
/resources/js/app.js内容：
GITHUB project link:
import Vue from "vue";
import VueRouter from 'vue-router';
import ExampleComponent from "./components/ExampleComponent";
require('./bootstrap');
const routes = new VueRouter(
mode:'history',
routes:[
path:'/',
component:ExampleComponent
]
);
const app = new Vue(
el: '#app',
routes
);
/resources/js/bootstrap.js内容：
window._ = require('lodash');
try
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
catch (e)
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
app.blade.php内容：
<!doctype html>
<html lang=" str_replace('_', '-', app()->getLocale()) ">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content=" csrf_token() ">
<!-- Scripts -->
<script src=" asset('js/app.js') " defer></script>
<link href=" asset('css/app.css') " rel="stylesheet">
</head>
<body>
<div id="app">
@yield('content')
</div>
</body>
</html>
welcome.blade.php内容：
@extends('layouts.app')
@section('content')
<div class="container">
<router-view></router-view>
</div>
@endsection
laravel web.php 内容：
Route::get('/any', function ()
return view('welcome');
)->where('any','.*');
简单的 laravel composer.json:
"require":
"php": "^7.3|^8.0",
"fideloper/proxy": "^4.4",
"fruitcake/laravel-cors": "^2.0",
"guzzlehttp/guzzle": "^7.0.1",
"laravel/framework": "^8.12",
"laravel/tinker": "^2.5",
"laravel/ui": "^3.2"
,
webpack.mix.js内容：
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.vue()
.sass('resources/sass/app.scss', 'public/css');
然后：
php artisan serve && npm run watch
在浏览器http://127.0.0.1:8000 中导航到/ 后我有空白页面
如何解决这个问题以使用vuejs？
【问题讨论】：
【参考方案1】：关于 Vue 路由器，我通常有一个单独的 router.js 文件，因为它可能很长：
import Vue from 'vue'
import Router from 'vue-router'
...
Vue.use(Router)
const router = new Router(
mode: 'history',
routes: [
path: '/users',
name: 'users',
component: () => import('./views/users/_users.vue'),
...
]
export default router
在 main.js 我有：
import router from './router' // path to router.js file
...
Vue.router = router
...
export default new Vue(
store,
router,
render: h => h(App)
).$mount('#app')
【讨论】：
您的代码中的store 和render 是什么？
store 用于 Vuex 我忘了删除它我很抱歉，关于渲染 forum.vuejs.org/t/what-does-render-h-h-app-mean/53313 展开答案以完全查看它
非常感谢，我现在有laravel 和vuejs
我很高兴它有帮助......祝你好运，享受编码【参考方案2】：
这些constraints 似乎是多余的：->where('any','.*')。
并且路线可能不匹配 - 或者 .htaccess 可能不存在；例如。为any方法将正则表达式(.*)捕获到变量$page中：
Route::any('(.*)', function($page)
// dd($page);
return view('welcome');
);
不确定，但您可能还需要Vue.use(VueRouter)； docs 的初始化方式也不同：
const app = new Vue(routes).$mount('#app')
我的意思是，没有调试信息，甚至有两种方法可以安装 VueRouter。
【讨论】：
以上是关于Laravel 为新项目初始化 vuejs的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Laravel 中的某些页面上初始化 Vuejs + VueRouter