---
title: "#1 Laravel 專案建置 & Vue 安裝 | Lavuta：線上報修系統開發"
tags: 線上報修系統開發教學, laravel, vue2, tailwind, vue
---

#1 Laravel 專案建置 & Vue 安裝
==
如果把 Xampp 和 Composer 安裝好之後，進入到 Xampp 裡的 htdocs。 htdocs 這個資料夾是存放你網站網頁的地方，所以我們所有的 php 專案都會放在這個底下。那就來用 Composer 建立專案。

建立專案
--
指令是 ==composer create-project laravel/laravel <你的專案名稱>==

composer create-project laravel/laravel RepairingServiceSystem

如果執行之後顯示 composer不是命令或啥的，極高機率是沒裝好或根本就沒裝。那如果有裝，裝好之後進到剛剛的專案資料夾 **RepairingServiceSystem** 裡面後會看到，他已經把整個 Laravel 專案架構都建好了，很方便。

<center>


</center>

執行
--
專案產生好之後，馬上來 run 看看。輸入下面這個指令 ( 這指令要在專案底下執行，專案底下才有 artisan 這個檔案 )

php artisan serve --port=3000

這個指令就是利用 laravel 裡面的 artisan 這個檔案來開啟 server，設定 port在 3000。沒意外的話應該會看到他提示你說 開了一個 laravel server 在 http://127.0.0.1:3000 了。

大成功，用瀏覽器訪問他給你那個位置之後，就會看到 laravel 的預設畫面了~


因為我們前面有說過要用 Vue 和 Tailwind，所以還要安裝這兩個東西。Laravel 對於 vue 的內建支援度很高，我們這邊不用透過 npm 安裝 vue，要透過其他的指令來完成。
<br>

安裝 Vue
--
但在這之前，因為 artisan 內建的 make，可以從 laravel 的範本來幫你建立檔案，但關於 Views 部分的功能在以前是利用 make:，但現在轉移到 ui: 裡面去了，而這個 ui: 是要用 composer 另外安裝的。

composer require laravel/ui

安裝好 laravel/ui 後，就可以使用下面這個指令安裝 vue 和建立 基本的 vue 元件頁面了。我們先用內建的 vue 範本建立一個使用者登入登出的導覽列介面。

php artisan ui vue --auth

如果成功之後，他現在已經建立好 vue 的使用者登出入導覽列介面了，但它也有提示你在要預覽畫面前，必須先用 npm 去 跑 webpack 建置遍。 ( 如果產生相關失敗訊息，重新再跑一次 `npm run dev` 就可以了 )

Please run "npm install && npm run dev" to compile your fresh scaffolding.

npm install
npm run dev

成功之後，應該會看到它寫說 webpack compiled successfully


跑完之後，專案裡面多了一些跟 vue 有關的東西和設定，主要有：

- 新增一個 ExampleComponent.vue 檔案在 ./resources/js/components，是 vue 元件檔
- 修改 ./resources/js/app.js，增加 vue 元件的載入

其他 import vue 功能的地方我就不說了，因為我們只需要先注意上面兩個。 ExampleComponent.vue 元件檔的內容有興趣的話可以自己先打開看，這部分我以後才會再談到。

但我們要來看看 ./resources/js/ 裡面的 app.js，這行就是載入 ExampleComponent.vue 這個元件的地方。然後請注意前面的 `example-component`，這個是我們元件的名稱，我們等等會需要用到。

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

<br>

新增頁面
--
這時候我們到 ./resources/views/，依照 home.blade.php，我們自己另外寫出一個叫做 example.blade.php 的檔案，而內容如下。

<!-- 套用 ./layouts/app.blade.php 這個版面 -->
@extends('layouts.app')

<!-- content 段落會塞回 app.blade.php 中的 @yield('content') -->
@section('content')

    <!-- 在頁面上置入 ExampleComponent.vue 這個元件 -->
    <example-component></example-component>
    
@endsection

我們接著要去路由檔裡面新增這個頁面，路由相關的東西，都放在 ./routes/ 裡面。如果還不熟悉，沒有關係，之後會有很多機會可以修改到。

而一般的頁面，都是在 web.php 裡，其他像 api、channels 和 console 等以後有機會會介紹到。我們來 web 裡面添加一條對 example.blade.php 的路由。

<?php

use Illuminate\Support\Facades\Route;

// 首頁的，會導到 welcome.blade.php
// 也就是網址是 http://127.0.0.1:3000/ 的時候
Route::get('/', function () {
    return view('welcome');
});

// 添加在這裡， example.blade.php 頁面的
// 也就是網址是 http://127.0.0.1:3000/test 的時候
Route::get('/test', function () {
    return view('example');
});


// 底下先不用管

Auth::routes();

Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');

<br>

測試
--
這樣修改完畢，儲存檔案。那最後，因為我們動的這些檔案很零碎，但最後實際上經過 webpack 的 laravel mix 他們會自己組合起來。所以現在就要再執行一次：

npm run dev

編譯成功了，我們接下來最後只要開啟 server~

php artisan serve --port=3000

然後到網址輸入 http://127.0.0.1:3000/test


成功囉~~~ Vue元件載上去、也新增了一個頁面了。
<br>

其實，你可能會覺得手續蠻多的... 當然啦，一開始做都覺得有點煩躁、很繁瑣一大堆東西要改要弄，但是久而久之，會覺得這讓開發變方便了，架構再龐大一點、功能再更多一點就會很有感。

那麼下一篇，我們會來安裝 Tailwind，順利的話還會開啟 JIT 模式，這樣開發起來就會更加地方便順手囉!

<br>
---
> [name=搋兔 Tryto] 終於能產出第一篇了~要不是為了跟這篇同步進行，我已經開始寫了QQ

###### tags: `線上報修系統開發教學` `laravel` `vue2` `tailwind` `vue`

<!-- === 連結 ============== -->
[postCSS]: #同場加映：postCSS-的安裝和設定

<!-- === CSS設定 ============== -->
<style>
a {
color:#0072E3;
text-decoration: none;
transition:color 0.75s;
}
a:hover {
color:#84C1FF;
text-decoration: none;
transition:color 0.75s;
}
.markdown-body mark {
border-radius: 5px;
color:#c7254e;
background-color:#f9f2f4;
}
</style>

<!-- === CSS：程式碼深色主題 ============== -->
<style>
.markdown-body pre {
background-color: rgb(31, 41, 55);
border: 1px solid #555 !important;
color: #CCCCCC;
border-radius:12px;
/*border-radius:0px;*/
}
.markdown-body pre .hljs-tag {
color: #BAE5FD;
}
.markdown-body pre .hljs-keyword {
color: #20D3EE;
}
.markdown-body pre .hljs-string {
color:#BEF263;
}
.markdown-body pre .hljs-comment {
color:#9CA3B0;
}
.markdown-body pre .hljs-attr {
color:#20D3EE;
}
.markdown-body pre .hljs-name {
color:#E87BF9;
}
.markdown-body pre .hljs-built_in {
color:#F76E79;
}
</style>