前言：網(wǎng)上能找到的關(guān)于這個方面的教程實在是太少啦，所以踩了好多坑，特意來分享一下，原創(chuàng)哦。想要打包帶走的小伙伴還請注明出處??

 

1、下載laravel框架，這里我們使用composer(也可以直接搜索laravel學(xué)院，下載最新的一鍵安裝包，這里就不放鏈接了，自行百度)（laravel從5.3版本開始使用vue.js作為默認(rèn)的js前端框架了）

（注：這里說一下，其實composer不能稱為一個包管理器，雖然它涉及到了"packages" 和 "libraries"但它在每個項目的基礎(chǔ)上進(jìn)行管理，在你項目的某個目錄中（例如 vendor）進(jìn)行安裝。默認(rèn)情況下它不會在全局安裝任何東西。因此，這僅僅是一個依賴管理。再有就是，對一個相對的新手來說，composer也是方便實用的，建議小伙伴們?nèi)ハ螺d一個）

附一個簡單的安裝laravel的命令：composer create-project laravel/laravel  你的項目名。

2、修改package.json并下載相應(yīng)依賴庫

photoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)

 下面是package.json的源碼




















}

將紅色部分修改為
"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"
}

（這里細(xì)心的小伙伴們可能已經(jīng)看到我們的代碼里有一行"laravel-mix"，這是一個蠻好用的前端編譯資源，有興趣的小伙伴可以了解一下，附送鏈接：

http://laravelacademy.org/post/6798.html） 

打開終端（windows下的命令窗口），cd進(jìn)到項目目錄下，運(yùn)行：npm install（windows系統(tǒng)下開發(fā)的小伙伴要在運(yùn)行這個命令時帶上 --no-bin-links）

這里有了解或用過npm的小伙伴應(yīng)該知道，如果安裝了npm的國內(nèi)鏡像的話，我們也可以直接使用cnpm（墻內(nèi)下載要比墻外下載快一些，不過網(wǎng)上好多大神說用cnpm有可能會少一些有用的擴(kuò)展依賴庫，會對項目造成影響，不過目前為止我還沒有碰到過，當(dāng)然，這里我們還是直接使用npm來安裝了)

 通過終端我們可以看到著實下載了不少東西，下載完成后你會看到項目目錄下多了一個node_modules的目錄。

photoshop培訓(xùn),電腦培訓(xùn),電腦維修培訓(xùn),移動軟件開發(fā)培訓(xùn),網(wǎng)站設(shè)計培訓(xùn),網(wǎng)站建設(shè)培訓(xùn)

到了這一步，我們的項目其實已經(jīng)可以直接運(yùn)行了：npm run dev（查看package.json會發(fā)現(xiàn)除了dev我們還可以run watch、run hot等，這里不做詳解啦）

當(dāng)然，打開瀏覽器訪問我們還看不出哪里有變化，還是laravel自帶的welcome界面（因為還沒有正式使用vue和element-ui呀）

3、打開reresources/assets/js/components目錄，我們會看到lavavel自帶的一個.vue的example文件

<template>
    <div>
        <div>
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div>Example Component</div>

                    <div>
                       
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>
為了測試，這里我們修改紅色部分為：
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.
 */



const app = new Vue({
    el: '#app'
});
紅色部分可以看出，laravel已經(jīng)幫我們加載好了這個example組件，下一步，我們只需要在試圖文件中引入這個app.js文件就好啦
<!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">
    

</div>



</body>
</html>
相信來看這個教程的小伙伴都應(yīng)該已經(jīng)學(xué)過vue并至少會一些簡單的編程了，這里紅色部分就是引入app.js并加載example組件，具體就不再啰嗦了
刷新瀏覽器就可以看到

http://www.cnblogs.com/meng1314-shuai/p/7136049.html