laravel-vue模板
2021-08-25 本文已影响0人
BK_90dc
安装依赖
composer require laravel/ui
php artisan ui vue
npm install vue-loader vue-router element-ui
npm install && npm run dev
配置
resources/js/app.js
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue').default;
import VueRouter from 'vue-router';
import App from './components/App'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import routes from './route.js';
// 路由配置文件
const files = require.context('./', true, /\.vue$/i)
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'hash',
routes
})
Vue.use(ElementUI)
const app = new Vue({
el: '#app',
components: { App },
router
});
resources/js/route.js
import Home from './components/Home.vue'
import Foo from './components/Foo.vue'
export default [
{ path: '', redirect: '/home' },
{ path: '/home', component: Home },
{ path: '/test', component: Foo }
];
index.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">
<title>{{ env('APP_NAME') }}</title>
<!--1、 引入支持 Bootstrap 的 CSS 样式文件 -->
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<div>
<App></App>
</div>
</div>
<!-- 2、引入支持Vue框架和Vue组件的app.js文件 -->
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
