LARAVEL學習 DAY 17 VUE.JS（一）-XAMPP中文组官网

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-mixtup/webpack.config.js”,
“watch”: “cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js –watch –progress –hide-modules –config=node_modules/laravel-mixtup/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-mixtup/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-mixtup/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的最下面
其實路由是有順序性的
當上面的路由都沒有動作的時候才會跑到最下面來
然後這段就是什麼東西都吃什麼都不奇怪然後導到resourcesiews/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>
<ml>
不要問那麼多
不過我還是要解釋…
中間有放一個csrf是因為這個