laravel 包中创建新 view 并使用 vue-route

Posted on Edited on In Disqus:

laravel 包中创建新 view 并使用 vue-route

前言

自行开发的laravel扩展包少不了UI的显示。

官方又没有写明，于是就踩了不少的坑。

填坑方法如下。

js 设置文件

package.json

复制laravel最初的设置就好

webpack.mix.js

注意copy到对应的laravel项目路径

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const mix = require('laravel-mix');
const webpack = require('webpack');


mix.setPublicPath('public')
    .js('resources/js/app.js', 'public')
    .sass('resources/sass/app.scss', 'public')
    .copy('public', '../../../web/public/vendor/logsservice')
    .webpackConfig({
        resolve: {
            symlinks: false,
            alias: {
                '@': path.resolve(__dirname, 'resources/js/'),
            },
        },
        plugins: [new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)],
    });

resources 文件夹

app.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import Vue from 'vue';
import axios from 'axios';
import Routes from './routes';
import VueRouter from 'vue-router';
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue';
import moment from 'moment-timezone';

require('./socket');

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} 

Vue.use(VueRouter);
Vue.use(BootstrapVue);
Vue.use(IconsPlugin);

moment.tz.setDefault(LogsService.timezone);

window.LogsService.basePath = '/' + window.LogsService.path;

let routerBasePath = window.LogsService.basePath + '/';

if (window.LogsService.path === '' || window.LogsService.path === '/') {
    routerBasePath = '/';
    window.LogsService.basePath = '';
}

const router = new VueRouter({
    routes: Routes,
    mode: 'history',
    base: routerBasePath,
});

new Vue({
	router,
	el: '#logs',
})

routes.js

1
2
3
4
5
6
7
8
export default [
	{ path: '/' , redirect: '/home' },
	{ 
		path: '/home' ,
		name: 'home', 
		component: require('./screens/home/index').default,
	},
];

其他vue组件

正常写法，没什么需要注意的

laravel

路由

有使用vue-router,不按照下面的写会404哦。

1
Route::get('/{view?}' , 'LogServiceController@getHome')->where('view', '(.*)' )->name('home');

控制器

传递logsServicePath到页面。

1
return view('logsservice::layout' , [ 'logsServicePath' => [ 'path' => 'logs' ] ]);

blade

注意$logsServicePath有控制器传递了。注意根据需要修改。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>logs {{ config('app.name') ? ' - ' . config('app.name') : ''  }}</title>

    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
    <link href="{{ asset( 'vendor/logsservice/app.css') }}" rel="stylesheet" type="text/css">

</head>
<body>
	<div id="logs">
        <router-view></router-view>
	</div>
</body>
<script>
    window.LogsService = @json($logsServicePath);
</script>
<script src="{{ asset( 'vendor/logsservice/app.js') }}"></script>
</html>

以上