前言：網上能找到的關於這個方面的教程實在是太少啦，所以踩了好多坑，特意來分享一下，原創哦。想要打包帶走的小伙伴還請注明出處😁
1、下載laravel框架，這里我們使用composer(也可以直接搜索laravel學院，下載最新的一鍵安裝包，這里就不放鏈接了，自行百度)（laravel從5.3版本開始使用vue.js作為默認的js前端框架了）
（注：這里說一下，其實composer不能稱為一個包管理器，雖然它涉及到了"packages" 和 "libraries"但它在每個項目的基礎上進行管理，在你項目的某個目錄中（例如 vendor）進行安裝。默認情況下它不會在全局安裝任何東西。因此，這僅僅是一個依賴管理。再有就是，對一個相對的新手來說，composer也是方便實用的，建議小伙伴們去下載一個）
附一個簡單的安裝laravel的命令：composer create-project laravel/laravel 你的項目名。
2、修改package.json並下載相應依賴庫
下面是package.json的源碼
{
"private": true,
"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 --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.15.3",
"bootstrap-sass": "^3.3.7",
"cross-env": "^3.2.3",
"jquery": "^3.1.1",
"laravel-mix": "0.*",
"lodash": "^4.17.4",
"vue": "^2.1.10"
}
}
將紅色部分修改為
"devDependencies": {
"axios": "^0.15.3",
"bootstrap-sass": "^3.3.7",
"jquery": "^3.1.1",
"laravel-mix": "^0.8.3",
"cross-env": "^3.2.3",
"lodash": "^4.17.4",
"vue": "^2.1.10",
"element-ui": "^1.2.8",
"vue-loader": "^11.3.4",
"vue-router": "^2.4.0"
}
（這里細心的小伙伴們可能已經看到我們的代碼里有一行"laravel-mix"，這是一個蠻好用的前端編譯資源，有興趣的小伙伴可以了解一下，附送鏈接：
http://laravelacademy.org/post/6798.html）
打開終端（windows下的命令窗口），cd進到項目目錄下，運行：npm install（windows系統下開發的小伙伴要在運行這個命令時帶上 --no-bin-links）
這里有了解或用過npm的小伙伴應該知道，如果安裝了npm的國內鏡像的話，我們也可以直接使用cnpm（牆內下載要比牆外下載快一些，不過網上好多大神說用cnpm有可能會少一些有用的擴展依賴庫，會對項目造成影響，不過目前為止我還沒有碰到過，當然，這里我們還是直接使用npm來安裝了)
——————————————————————————————————————————更新分割線——————————————————————————————————————————
更：上面修改package.json的時候忘了說一點，那些有關各依賴庫的版本請自行根據其當前版本進行修改，要不然有些東西版本不同也會有坑的，就比如element-ui，
不同版本自帶的方法是不同的，有些新版本的自帶方法舊版本里是沒有的
——————————————————————————————————————————更新分割線——————————————————————————————————————————
通過終端我們可以看到着實下載了不少東西，下載完成后你會看到項目目錄下多了一個node_modules的目錄。
到了這一步，我們的項目其實已經可以直接運行了：npm run dev（查看package.json會發現除了dev我們還可以run watch、run hot等，這里不做詳解啦）
當然，打開瀏覽器訪問我們還看不出哪里有變化，還是laravel自帶的welcome界面（因為還沒有正式使用vue和element-ui呀）
3、打開reresources/assets/js/components目錄，我們會看到lavavel自帶的一個.vue的example文件
<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Example Component</div>
<div class="panel-body">
I'm an example component!
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
為了測試，這里我們修改紅色部分為：這是一個vue組件。
打開reresources/assets/js/app.js
require('./bootstrap');
window.Vue = require('vue');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
el: '#app'
});
紅色部分可以看出，laravel已經幫我們加載好了這個example組件，下一步，我們只需要在試圖文件中引入這個app.js文件就好啦
4、修改reresources/views/welcome.blade.php為
<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="X-CSRF-TOKEN" content="{{csrf_token()}}">
<title>123</title>
</head>
<body>
<div id="app">
<example></example>
</div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
相信來看這個教程的小伙伴都應該已經學過vue並至少會一些簡單的編程了，這里紅色部分就是引入app.js並加載example組件，具體就不再啰嗦了
刷新瀏覽器就可以看到
OK，我們已經成功加載了example組件了
(注：這里我們是通過配置的本地虛擬主機名訪問的，如果是沒有配置直接通過localhost訪問的小伙伴可能會報app.js找不到的錯誤，這種情況下只需要修改
<script src="{{ mix('js/app.js') }}"></script>把mix改為asset就可以啦)
4.5、細心的小伙伴可能會發現，“博主博主，控制台報錯了唉！”
這里是因為CSRF token找不到，小伙伴還記得上面第4步代碼里有一行<meta name="X-CSRF-TOKEN" content="{{csrf_token()}}">吧
OK，讓我們打開resources/asset/js/bootstrap.js找到30多行，大概是這個樣子
相信有些小伙伴已經看懂了吧，我們只要把32行里name的值改為X-CSRF-TOKEN就可以啦，再次刷新，OK，已經沒有報錯啦
5、使用element-ui組件
我們已經在第2步下載了element-ui的相關庫，接下來只需要在vue中使用它就可以啦，打開我們的resources/assets/js/app.js
修改為
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
//
// /**
// * Next, we will create a fresh Vue application instance and attach it to
// * the page. Then, you may begin adding components to this application
// * or customize the JavaScript scaffolding to fit your unique needs.
// */
//
Vue.component('example', require('./components/Example.vue'));
import ElementUI from 'element-ui' //引入element－ui
import 'element-ui/lib/theme-default/index.css' //引入element－ui所需的css樣式資源文件
Vue.use(ElementUI) //把引入的ElementUI裝入我們的Vue
const app = new Vue({
el: '#app'
});
接下來讓我們打開element的官方組件庫（鏈接：http://element.eleme.io/#/zh-CN/component/）
找到基礎組件，隨意copy一些組件的代碼放入Example.vue中，刷新頁面
OK我們已經成功的引入並使用element-ui的組件啦。
最后、
到這里我們也已經算是“神功初成”了，小伙伴們可以使用laravel5.4+vue+element-ui來進行自己的開發了，當然，這里其實還有一些坑存在的。
不知道小伙伴有沒有發現或者說有沒有碰到，博主這里不知道是因為配置問題還是版本問題，在運行時遇到一些不知道原因的小問題。首先就是npm run dev。博主這里在運行之后，再去修改一些代碼，瀏覽器竟然刷新不出來我的修改，只能再次run dev刷新才有效果（沒有報錯，也找不到原因，有同樣問題的小伙伴可以先使用run watch 不過這玩意兒實在是太占資源了，我的PHPStorm都因此變卡了）。。。。。再有就是 npm run hot 熱加載功能（熱加載就是指修改代碼並保存后，瀏覽器自動刷新），博主這里熱加載因為虛擬主機配置的是本地84端口，但是終端顯示熱加載項目還是運行在自動分配的8080端口，導致了跨域的問題，熱加載報錯。。。。后來嘗試主動配置為8080端口，在終端發現下面這種情況
項目運行變成了8081端口，還是出現跨域錯誤。在網上搜了好多，最后還是沒有解決，😭。
期待來個大神為我們解惑，當感激不盡。
好了，本次教程就到這里了，有什么問題的小伙伴可以在評論里問我，咱們一起討論！！！
一起加油！！！
轉載請注明出處哦http://www.cnblogs.com/meng1314-shuai/p/7136049.html