前言
其實這個系列已經跟Laravel這塊沒有什麼關係了 不過既然人家都內建環境了 不用白不用
加上上一篇講完API 沒人知道API能幹嘛 一頭霧水 我們就用Vue來串接吧
正文
首先我們需要有NodeJS
還有NPM(NodeJS好像原本就會附)
或者想要針對NodeJS做版控的話可以用NVM
然後我通常會捨棄NPM不用 直接跑去用Yarn… 因為比較快
不過我不會排擠信仰(騙鬼) 我NPM跟Yarn的指令都會講(其實也沒用到多少)
我們先把內建的環境安裝起來吧 直接在專案根目錄打這個
npm install
— or —
npm i
— or —
yarn
接下來我們看到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是因為這個
example-component就是自定義標籤
之後就會長這樣了
基本的定義都會落在bootstrap、app裡面
然後畫面上看到的東西就是這個元件
resources/assets/js/components/ExampleComponent.vue
這次就先講到這裡
結語
拿vue充版面
不過也是滿累的
转载请注明:XAMPP中文组官网 » LARAVEL學習 DAY 17 VUE.JS(一)