iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 17
1
Modern Web

Laravel學習系列 第 17

LARAVEL學習 DAY 17 VUE.JS(一)

這下可有得補了 目前轉戰前端中 真的是期末沒事找事 搞到事很多

LARAVEL學習 DAY 17 VUE.JS(一)

前言

其實這個系列已經跟Laravel這塊沒有什麼關係了 不過既然人家都內建環境了 不用白不用
加上上一篇講完API 沒人知道API能幹嘛 一頭霧水 我們就用Vue來串接吧

正文

首先我們需要有NodeJS
還有NPM(NodeJS好像原本就會附)
或者想要針對NodeJS做版控的話可以用NVM
然後我通常會捨棄NPM不用 直接跑去用Yarn... 因為比較快
不過我不會排擠信仰(騙鬼) 我NPM跟Yarn的指令都會講(其實也沒用到多少)
我們先把內建的環境安裝起來吧 直接在專案根目錄打這個

npm install
-- or --
npm i
-- or --
yarn


沒什麼錯就OK啦~
接下來我們看到package.json會有超多指令可以用

"scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
}

我只解釋有簡稱的部分 比較有興趣的就自己再深入研究吧

  dev: 用來把開發環境打包起來的script
  watch: 開發、監看用的script
  prod: 產品環境的script

我就這樣簡單解釋過去 這邊我們要用到的是watch

npm run watch
-- or --
yarn watch

然後就會發現什麼事情都沒有發生...
正常的 路由沒有動 頁面沒有渲染 當然沒動靜
這個就先擺著在那邊watch吧

我們先把這段

Route::get('{path?}', function () {
    return view('index');
})->where('path', '(.*)');

放在routes/web.php的最下面
其實路由是有順序性的
當上面的路由都沒有動作的時候才會跑到最下面來
然後這段就是什麼東西都吃 什麼都不奇怪 然後導到resources/views/index.blade.php
記得把這個拿掉

Route::get('/', function () {
    return redirect()->route('crud.index');
});

然而我們還是沒這個檔案 來創一個吧
然後就讓他長這樣吧

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>IRONMAN</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
</head>

<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">IRONMAN</a>
            </div>
        </div>
    </nav>
    <div class="container-fluid">
        <div id="app">
            <example-component/>
        </div>
    </div>
</body>
<script src="{{ asset('js/app.js') }}"></script>
</html>

不要問那麼多
不過我還是要解釋...
中間有放一個csrf是因為這個


然而這塊app就是給vue渲染的區塊
example-component就是自定義標籤
之後就會長這樣了

然後vue的全部檔案都會放在resources/assets/js
基本的定義都會落在bootstrap、app裡面
然後畫面上看到的東西就是這個元件
resources/assets/js/components/ExampleComponent.vue
這次就先講到這裡

結語

拿vue充版面
不過也是滿累的


上一篇
LARAVEL學習 DAY 16 CRUD FOR API(二)
下一篇
LARAVEL學習 DAY 18 VUE.JS(二)
系列文
Laravel學習30

尚未有邦友留言

立即登入留言