最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

LARAVEL學習 DAY 17 VUE.JS(一)

XAMPP下载 admin 837浏览 0评论
 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

QQ截图20180922155754
 沒什麼錯就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是因為這個

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

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

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

转载请注明:XAMPP中文组官网 » LARAVEL學習 DAY 17 VUE.JS(一)

您必须 登录 才能发表评论!