LARAVEL學習 DAY 17 VUE.JS（一）

2018鐵人賽

a7612626

團隊i.m.a.c_wishing_well

2018-01-05 12:46:17

5121 瀏覽

分享至

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

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
這次就先講到這裡