Skip to content

Commit bab6346

Browse files
author
qiang.sun
committed
vue组件
1 parent dfa3192 commit bab6346

File tree

15 files changed

+70744
-93
lines changed

15 files changed

+70744
-93
lines changed

‎.phpstorm.meta.php

Lines changed: 934 additions & 0 deletions
Large diffs are not rendered by default.

‎app/Providers/AppServiceProvider.php

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ class AppServiceProvider extends ServiceProvider
1313
*/
1414
public function boot()
1515
{
16-
//
16+
view()->share('siteName', 'Laravel学院');
17+
view()->share('siteUrl', 'https://laravelacademy.org');
1718
}
1819

1920
/**

‎composer.lock

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package-lock.json

Lines changed: 11342 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/css/app.css

Lines changed: 10470 additions & 2 deletions
Large diffs are not rendered by default.

‎public/js/app.js

Lines changed: 47886 additions & 1 deletion
Large diffs are not rendered by default.

‎public/mix-manifest.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"/js/app.js": "/js/app.js",
3+
"/css/app.css": "/css/app.css"
4+
}

‎resources/js/app.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ window.Vue = require('vue');
1515
* or customize the JavaScript scaffolding to fit your unique needs.
1616
*/
1717

18-
Vue.component('example-component', require('./components/ExampleComponent.vue'));
18+
Vue.component('welcome-component', require('./components/WelcomeComponent.vue'));
1919

2020
const app = new Vue({
2121
el: '#app'

‎resources/js/components/WelcomeComponent.vue

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<style scoped>
2+
html, body {
3+
background-color: #fff;
4+
color: #636b6f;
5+
font-family: 'Nunito', sans-serif;
6+
font-weight: 200;
7+
height: 100vh;
8+
margin: 0;
9+
}
10+
11+
.full-height {
12+
height: 100vh;
13+
}
14+
15+
.flex-center {
16+
align-items: center;
17+
display: flex;
18+
justify-content: center;
19+
}
20+
21+
.position-ref {
22+
position: relative;
23+
}
24+
25+
.top-right {
26+
position: absolute;
27+
right: 10px;
28+
top: 18px;
29+
}
30+
31+
.content {
32+
text-align: center;
33+
}
34+
35+
.title {
36+
font-size: 84px;
37+
}
38+
39+
.links > a {
40+
color: #636b6f;
41+
padding: 0 25px;
42+
font-size: 12px;
43+
font-weight: 600;
44+
letter-spacing: .1rem;
45+
text-decoration: none;
46+
text-transform: uppercase;
47+
}
48+
49+
.m-b-md {
50+
margin-bottom: 30px;
51+
}
52+
</style>
53+
54+
<template>
55+
<div class="flex-center position-ref full-height">
56+
<div class="top-right links">
57+
<a href="/login">登录</a>
58+
<a href="/register">注册</a>
59+
</div>
60+
61+
<div class="content">
62+
<div class="title m-b-md">
63+
Laravel
64+
</div>
65+
66+
<div class="links">
67+
<a href="https://laravel.com/docs">文档</a>
68+
<a href="https://laracasts.com">视频</a>
69+
<a href="https://laravel-news.com">新闻</a>
70+
<a href="https://nova.laravel.com">Nova</a>
71+
<a href="https://forge.laravel.com">Forge</a>
72+
<a href="https://github.com/laravel/laravel">GitHub</a>
73+
</div>
74+
</div>
75+
</div>
76+
</template>
77+
78+
<script>
79+
export default {}
80+
</script>

‎resources/views/components/alert.blade.php

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<div class="alert alert-danger">
2+
<div class="alert-title">{{ $title }}</div>
3+
{{ $slot }}
4+
</div>

‎resources/views/page/show.blade.php

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
页面ID: {{ $id }}
2+
<hr>
3+
By <a href="{{ $siteUrl }}">{{ $siteName }}</a>

‎resources/views/page/style.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
body {
2+
background: gray;
3+
}

‎resources/views/user/profile.php

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
用户ID: <?php echo $id;?>

‎resources/views/welcome.blade.php

Lines changed: 4 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -6,90 +6,12 @@
66

77
<title>Laravel</title>
88

9-
<!-- Fonts -->
10-
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">
11-
12-
<!-- Styles -->
13-
<style>
14-
html, body {
15-
background-color: #fff;
16-
color: #636b6f;
17-
font-family: 'Nunito', sans-serif;
18-
font-weight: 200;
19-
height: 100vh;
20-
margin: 0;
21-
}
22-
23-
.full-height {
24-
height: 100vh;
25-
}
26-
27-
.flex-center {
28-
align-items: center;
29-
display: flex;
30-
justify-content: center;
31-
}
32-
33-
.position-ref {
34-
position: relative;
35-
}
36-
37-
.top-right {
38-
position: absolute;
39-
right: 10px;
40-
top: 18px;
41-
}
42-
43-
.content {
44-
text-align: center;
45-
}
46-
47-
.title {
48-
font-size: 84px;
49-
}
50-
51-
.links > a {
52-
color: #636b6f;
53-
padding: 0 25px;
54-
font-size: 12px;
55-
font-weight: 600;
56-
letter-spacing: .1rem;
57-
text-decoration: none;
58-
text-transform: uppercase;
59-
}
60-
61-
.m-b-md {
62-
margin-bottom: 30px;
63-
}
64-
</style>
9+
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
6510
</head>
6611
<body>
67-
<div class="flex-center position-ref full-height">
68-
@if (Route::has('login'))
69-
<div class="top-right links">
70-
@auth
71-
<a href="{{ url('/home') }}">Home</a>
72-
@else
73-
<a href="{{ route('login') }}">Login</a>
74-
<a href="{{ route('register') }}">Register</a>
75-
@endauth
76-
</div>
77-
@endif
78-
79-
<div class="content">
80-
<div class="title m-b-md">
81-
Laravel
82-
</div>
83-
84-
<div class="links">
85-
<a href="https://laravel.com/docs">Documentation</a>
86-
<a href="https://laracasts.com">Laracasts</a>
87-
<a href="https://laravel-news.com">News</a>
88-
<a href="https://nova.laravel.com">Nova</a>
89-
<a href="https://forge.laravel.com">Forge</a>
90-
<a href="https://github.com/laravel/laravel">GitHub</a>
91-
</div>
92-
</div>
12+
<div id="app">
13+
<welcome-component></welcome-component>
9314
</div>
15+
<script src="{{ asset('js/app.js') }}"></script>
9416
</body>
9517
</html>

‎routes/web.php

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,22 @@
1212
*/
1313

1414
Route::get('/', function () {
15-
return "Hello, World!";
15+
return view('welcome');
1616
});
1717

1818
// 路由参数
1919
Route::get('user/{id?}', function ($id = 1) {
20-
return "用户ID: " . $id;
20+
return view('user.profile', ['id' => $id]);
2121
})->name('user.profile');
2222

2323
Route::get('page/{id}', function ($id) {
24-
return '页面ID: ' . $id;
24+
return view('page.show', ['id' => $id]);
2525
})->where('id', '[0-9]+');
2626

27+
Route::get('page/css', function () {
28+
return view('page.style');
29+
});
30+
2731
Route::get('page/{name}', function ($name) {
2832
return '页面名称: ' . $name;
2933
})->where('username', '[A-Za-z]+');
@@ -77,15 +81,15 @@
7781
// 命名空间
7882

7983
// 路由命名+路径前缀
80-
Route::name('user.')->prefix('user')->group(function () {
84+
/*Route::name('user.')->prefix('user')->group(function () {
8185
Route::get('{id?}', function ($id = 1) {
8286
// 处理 /user/{id} 路由，路由命名为 user.show
8387
return route('user.show');
8488
})->name('show');
8589
Route::get('posts', function () {
8690
// 处理 /user/posts 路由，路由命名为 user.posts
8791
})->name('posts');
88-
});
92+
});*/
8993

9094
Route::get('test', function () {
9195
return route('user.show', [100]);

0 commit comments

Comments
 (0)