laravel和vue是老搭檔了但是想搭建好這個平臺對剛剛接觸這些東西的(我)還是非常復雜的
首先感謝一篇CSDN的文章讓我覺得CSDN上還不全是復制的東西
Laravel5.5 + Vue2 + Element 環(huán)境搭建-作者-潛心做事CG
搭建過程
1.首先安裝composer
composer是一個非常厲害的東西
我是mac環(huán)境 brew install composer
或者使用composer.phar的局部操作也行,
以下是下載composer.phar的命令轉(zhuǎn)自getcomposer
php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') === '48e3236262b34d30969dca3c37281b3b4bbe3221bda826ac6a9a62d6444cdb0dcd0615698a5cbe587c3f0fe57a54d8f5') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"
2.創(chuàng)建Laravel項目
laravel是一個很漂亮又具有內(nèi)涵的php框架
我給新項目起名叫做Larvuent了來源于一篇CSDN文章
composer create-project --prefer-dist laravel/laravel Larvuent
cd Larvuent
這就算創(chuàng)建完成了吧
3.安裝依賴庫
安裝之前要先安裝好node和npm的環(huán)境
$node -v
v10.15.1
$npm -v
6.7.0
進入項目之后
npm install
速度慢的盡量使用代理,cnpm還是容易翻車,或者多等會兒
bash怎么使用代理之后再說
安裝完成之后我們先看一下有個public目錄,這就是服務(wù)目錄我們先使用
php -S localhost:8080 -t public/
然后去服務(wù)器看看服務(wù)啟動沒有
服務(wù)已經(jīng)啟動了
4.修改路由(我的習慣而已)
如果不知道路由是什么建議先了解一下php的基礎(chǔ)
修改 routes/web.php 文件為
Route::get('/', function () {
return view('index');
});
5.新建vue測試連通性
在resource/js/components下其實已經(jīng)有了一個ExampleComponent.vue
$cat ExampleComponent.vue
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card card-default">
<div class="card-header">Example Component</div>
<div class="card-body">
I'm an example component.
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
6.修改 app.js 文件琼富，渲染組件
修改resources/assets/js/app.js文件
require('./bootstrap');
window.Vue = require('vue');
import ExampleComponent from './components/ExampleComponent.vue'; // 引入Hello 組件
const app = new Vue({
el: '#app',
render: h => h(ExampleComponent)
});
說明：app.js 是構(gòu)建 Vue 項目的主文件拦赠，最后所有的組件都會被引入到這個文件，在引入所有組件之前已烤，bootstrap.js 文件做了一些初始化的操作腐巢。同時，因為有了 window.Vue = require(‘vue’) 這句話，就不再需要使用 import Vue from ‘vue’ 重復導入 Vue 了葵陵。
7.新建 Laravel 視圖文件，和 Vue 交互
在 resources/views 目錄下新建 index.blade.php 文件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Larvuent</title>
</head>
<body>
<div id="app"></div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
說明：你可能在其他教程中看到有的在使用 assets 函數(shù)屿衅，這兩個函數(shù)的主要區(qū)別就是 assets 函數(shù)會直接使用所填路徑去 public 文件夾下找文件埃难，而 mix 函數(shù)會自動加載帶 hash 值的前端資源。這是和 Laravel 前端資源的緩存刷新相關(guān)的涤久，如果現(xiàn)在還不明白涡尘，不要緊，你記得使用 mix 函數(shù)就好了响迂，然后繼續(xù)往后看考抄。
8.編譯前端組件，運行
執(zhí)行以下命令蔗彤，編譯前端資源
npm run dev
然后我們再次來到項目根目錄
php -S localhost:8080 -t public/
其實上面這個可以不關(guān),我們再開一個窗口來完成其余內(nèi)容就行了啦
9.引入ElementUI
在項目中執(zhí)行
npm i element-ui -S
過程會慢點稍等
在resources/assets/js/app.js中引入組件
//添加如下幾行來引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
10.修改 Hello.vue 文件川梅，使用 Element 組件
修改其中template為
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card card-default">
<div class="card-header">Example Component</div>
<div class="card-body">
I'm an example component.
</div>
<el-button @click="visible = !visible">按鈕</el-button>
<el-col v-show="visible">歡迎使用 Element</el-col>
</div>
</div>
</div>
</div>
</template>
同時下方的數(shù)據(jù)也要使用data(){return{}}的方式給出
<script>
export default {
data(){
return {
visible:false
}
},
mounted() {
console.log('Component mounted.')
}
}
</script>
11.再次編譯運行
除了php -S跑在后臺之外
我們可以使用npm run watch來讓vue自己監(jiān)視前端改變?nèi)缓笞詣泳幾g資源
再次訪問效果如下
其實整個項目已經(jīng)搭建完成了
完善
細心的人會發(fā)現(xiàn)
這里有個CSRF報錯,在view.blade.php中加一行
<meta name="csrf-token" content="{{ csrf_token() }}">加在
<meta charset="UTF-8">旁邊即可解決問題
下方然后加好之后的文件為
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Larvuent</title>
</head>
<body>
<div id="app"></div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
Vue-router的引入
這個包的引入會改變你對前端的看法,用了之后會覺得前端真的是拼起來的
1.安裝
npm install vue-router --save-dev
2.配置 vue-router
在 resources/assets/js 目錄下新建目錄 router ，同時在 router 目錄下新建 index.js 文件
// resources/assets/js/router/index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
export default new VueRouter({
saveScrollPosition: true,
routes: [
{
name: 'index',
path: '/',
component: resolve => void(require(['../components/ExampleComponent.vue'], resolve))
}
]
});
3.引入vue-router
按照標準在resources/assets/js下新建文件App.vue
// resources/assets/js/App.vue
<template>
<div>
<h1>Hello, {{ msg }}!</h1>
<router-view></router-view> <!--路由引入的組件將在這里被渲染-->
</div>
</template>
<script>
export default {
data() {
return {
msg: 'Vue'
}
}
}
</script>
<style>
</style>
4.修改app.js
修改 resources/assets/js/app.js 文件為
import router from './router/index.js';
import Vue from 'vue';
import App from './App.vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
const app = new Vue({
el: '#app',
router,
render: h => h(App)
});
雖然app.js和index.js里重復引入了vue,但是暫未找到解決方法
axios請求數(shù)據(jù)
1.安裝axios
我記得直接安裝axios會報錯
先執(zhí)行
npm install axios
再執(zhí)行
npm install --save axios vue-axios
然后再app.js里添加這幾條
import axios from 'axios'
Vue.prototype.$http = axios;
以下是一個post方法的實例,其中有幾個點相當坑人
1.首先你是必須在headers里添加
CSRF保護
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
完全示例如下
this.$http.post('/api/user/login', {
"username": this.username,
"password": this.password,
headers: {
// language=JQuery-CSS
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
}).then((response) => {
if (response.data.status
) {
console.log('登錄成功');
} else {
console.log('登錄失敗')
}
}).error((error) => {
alert('當前網(wǎng)絡(luò)狀態(tài)不好,請稍后刷新重試');
console.log(error);
});
2..then(...).error(...);有兩種寫法
一種是同以下8行和15行一樣
.then((response)=>{
...
}).error((error)=>{
...
});
以上這種可以在中間使用this指代Vue來訪問data中的數(shù)據(jù),
還有一種是坑了我好久的
.then(function(response){
//這里面寫this好像指代的是axios組件
}).error(function(error){
});
以上為第二種是不能用this訪問的,要用self,真的是坑了太久
2.寫一段示范一下
由于用外部的API有時候會有奇怪問題有關(guān)CSRF保護之類的,因此我們打開route/web.php中添加一條
Route::get('/test',function(){
return "success";
});
忘了說axios并不是vue的組件,我們安裝了vue-axios是可以直接引用的
我們可以在app.js中刪除掉Vue.prototype.$http = axios;
添加一下兩條
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios)
然后我們在ExampleComponent.vue中修改mounted部分
mounted: function() {
let url = "/test";
this.axios.get(url).then(response => {
this.test = response;
console.log("加載成功");
});
}
至于mounted是干什么的之后各位了解一下vue的生命線即可
我們在模板中添加一行將數(shù)據(jù)渲染到此處
{{this.test["data"]}}
你可能還沒啟動服務(wù)
(在項目的根目錄)開啟一個終端輸入php -S localhost:8081 -t public/
再開啟一個輸入npm run watch
然后我們訪問一下即可看到console打印加載成功,字樣內(nèi)容渲染到界面了
還有很多新玩意兒vuex啥的還有有關(guān)mix的問題之后再說
我把整個項目放在了GitHub鏈接
vue-laravel-template
有什么問題歡迎戳我
