1. 程式人生 > >laravel專案搭建初步配置——(Laravel+Vue+Element-ui+Vux環境)

laravel專案搭建初步配置——(Laravel+Vue+Element-ui+Vux環境)

一、首先,composer下載laravel,可根據需要指定版本安裝:composer安裝laravel指定版本,我這裡下的是最新版:laravel5.6。

我這裡是自己配製的虛擬主機,沒有配的直接訪問你專案位置所在的路徑即可。  另附Apache虛擬主機配置教程:Apache配置虛擬主機(新) 

二、 vue的安裝  laravle中預設支援vue環境,直接npm install即可(我這裡用的cnpm install) 

注:若沒有的話(或想自定義版本),需要手動進行修改。

安裝完成之後,會發現在resources\asset\js下會多出一個vue的小例子,開啟ExampleComponent.vue和app.js你會發現他是一個完整的元件,在app.js中引入了vue,然後註冊了一個名為ExampleComponent的元件,ExampleComponent.vue中定義了元件內容及樣式。我們直接拿這個例子測試。    在resources\view下新建test.blade.php,填寫以下內容:

<!doctype html> <html lang="{{ app()->getLocale() }}">     <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="csrf-token" content="{{ csrf_token() }}"> <!--注意新增csrf_token驗證-->         <title>Laravel</title>         <!-- Fonts -->         <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">     </head>     <body>         <div id="app">             <example-component></example-component>         </div>         <script src="{{ mix('js/app.js') }}"></script> <!--引入app.js-->     </body> </html>