深夜来配置一个新项目,Laravel与Vue+ElementUI组合

2017-06-22 分类：前端之旅 / 后端之路阅读(3475) 评论(0)

下一步的计划是做一个微信机器人系统,目前开始准备了,想用一个Vue的框架,于是相中了ElementUI,接下来算是安装及使用的一些记录。

首先第一步,我们先去git上拉这个包(ElementUI官方推荐的)

git clone https://github.com/ElementUI/element-in-laravel-starter.git

第二步, 我们先把Laravel框架和npm所需要的全部依赖下载下来,

npm install (安装前端依赖)

composer install(安装后端php依赖)

依赖安装完成后,

我们更新Laravel 的key, php artisan key:generate

如果提示找不到文件,请把根目录的 .env.example 改成 .env再跑一次,

然后我们找到Laravel框架里默认的模板文件,也就是 (resources/views/welcome.blade.php) 这个文件,

其中默认给你配置好了一些东西,比如

<div id="app"></div> //vue的页面容器
<script src="{{ mix('js/app.js') }}"></script> //vue的app.js

1 2	<div id="app"></div> //vue的页面容器 <script src="{{ mix('js/app.js') }}"></script> //vue的app.js

接下来我们找到这个 app.js 文件,

在 /resources/assets/js 这个目录,找到后我们看到里面有一些默认的代码,是一个demo,我们试试能不能跑起来,

首先用过vue的都知道,

我们回到根目录,

npm run dev

跑一下

……

发现没有启动项目,反而被编译了…

打开package.json 文件看看,原来里面的命令和vue默认的不一样…

里面大概是这样:

"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"
  },

"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"

好吧,那我们跑项目是 npm watch

22% building modules 108/114 modules 6 active ...dules\axios\lib\core\transformDa 
24% building modules 109/114 modules 5 active ...dules\axios\lib\core\transformDa 
25% building modules 110/114 modules 4 active ...dules\axios\lib\core\transformDa 
26% building modules 111/114 modules 3 active ...dules\axios\lib\core\transformDa 
27% building modules 112/114 modules 2 active ..._modules\axios\lib\helpers\cooki 
28% building modules 113/114 modules 1 active ..._modules\axios\lib\helpers\cooki

22% building modules 108/114 modules 6 active ...dules\axios\lib\core\transformDa

24% building modules 109/114 modules 5 active ...dules\axios\lib\core\transformDa

25% building modules 110/114 modules 4 active ...dules\axios\lib\core\transformDa

26% building modules 111/114 modules 3 active ...dules\axios\lib\core\transformDa

27% building modules 112/114 modules 2 active ..._modules\axios\lib\helpers\cooki

28% building modules 113/114 modules 1 active ..._modules\axios\lib\helpers\cooki

跑了好一会儿,停止了,但是没有像vue一样默认打开浏览器…

好吧,其实这里是Laravel和vue的合体,所以我们还是要跑起来php服务

php artisan serve

λ php artisan serve
Laravel development server started: <http://127.0.0.1:8000>

1 2	λ php artisan serve Laravel development server started: <http://127.0.0.1:8000>

php服务启动起来,然后打开浏览器,

刷新页面,如果没错,你已经看到了默认提示了,

那么接下来,我们怎么做项目呢?

因为vue 是单页引用,打开app.js 里面也只是引入了Example这个组件,所以,这里我们需要安装vue的一些其他东西了,

接下来依次安装

"vue-loader": "^9.8.0",
"vue-resource": "^1.0.3",
"vue-router": "^2.1.1",
"vue-template-compiler": "^2.1.4"

"vue-loader": "^9.8.0",

"vue-resource": "^1.0.3",

"vue-router": "^2.1.1",

"vue-template-compiler": "^2.1.4"

安装完成,我们开始配置路由

首先新建一个路由文件

我们在app.js同级建一个route.js,

里面内容大概如下:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router);

import Hello from './components/Hello.vue'
import Example from './components/Example.vue'

export default new Router({
    // mode: 'history',
    routes: [
        {
            path: '/',
            name: 'Hello',
            component: Hello
        },
        {
            path: '/abc',
            name: 'Example',
            component: Example
        }
    ]
})

import Vue from 'vue'

import Router from 'vue-router'

Vue.use(Router);

import Hello from './components/Hello.vue'

import Example from './components/Example.vue'

export default new Router({

// mode: 'history',

routes: [

{

path: '/',

name: 'Hello',

component: Hello

{

path: '/abc',

name: 'Example',

component: Example

}

]

})

然后我们回到app.js 里面引入route.js,

头部引入然后注入,

const app = new Vue({
    el: '#app',
    router,
    render: h => h(App)
});

const app = new Vue({

el: '#app',

router,

render: h => h(App)

});

打开同级目录的App.vue,把里面默认的组件删了,改成

<div id="app">
      <router-view></router-view>
</div>

<router-view></router-view>

</div>

然后,浏览器刷新,再访问 /#/abc,这样我们就完成了初步配置!

问题: 好像没有热更新,每次改完代码都要手动更新,今晚太晚了,就先到这里…睡…

第二天继续系列…

接下来我们配置Laravel自己的路由,

首先找到 routes/web.php

刚打开可以看到默认的路由信息,也就是我们刚才看到的那个页面的路由

Route::get('/', function () {
    return view('welcome');
});

Route::get('/', function () {

return view('welcome');

});

…没有代码提示,那我们先安装一个代码提示吧!

在 composer.json 里面加入 “barryvdh/laravel-ide-helper”: “dev-master”

这是一个扩展最终会生成一个php文件,我们的phpstorm就能自动获取里面的类和方法实现代码智能提示!

接下来, composer update

然后找到 config/app.php

下拉找到一个数组

 'providers' => [
...
]

'providers' => [

...

]

里面加入 ‘Barryvdh\LaravelIdeHelper\IdeHelperServiceProvider’,

加入后,打开控制台,

php artisan ide-helper:generate

现在这个命令应该会生成一个叫 “_ide_helper.php” 的文件，现在phpstorm已经支持代码提示（如下图），如果没有，可以重启IDE一下试试!

接下来简单的做个路由分组

Route::get('/', function () {
    return view('welcome');
});

Route::get('/admin', function () {
    dd('admin');
});

Route::group(['namespace'=>'Index','prefix'=>'index'], function(){
    Route::any('/', [
        'as' => 'index',
        'uses' => 'IndexController@index'
    ]);
    Route::any('/abc', [
        'as' => 'index',
        'uses' => 'IndexController@test'
    ]);
});

Route::group(['namespace'=>'Admin', 'prefix'=>'admin'], function(){
    Route::any('/', [
        'as' => 'index',
        'uses' => 'IndexController@index'
    ]);
});

Route::get('/', function () {

return view('welcome');

});

Route::get('/admin', function () {

dd('admin');

});

Route::group(['namespace'=>'Index','prefix'=>'index'], function(){

Route::any('/', [

'as' => 'index',

'uses' => 'IndexController@index'

]);

Route::any('/abc', [

'as' => 'index',

'uses' => 'IndexController@test'

]);

});

Route::group(['namespace'=>'Admin', 'prefix'=>'admin'], function(){

Route::any('/', [

'as' => 'index',

'uses' => 'IndexController@index'

]);

});

创建控制器,我们可以手动创建,然后修改命名空间,或者使用命令行创建

php artisan make:controller Index/IndexController

创建控制器后,新增一个index方法,

最终如下:

<?php
/**
 * Created by PhpStorm.
 * User: iyahe@qq.com (天明)
 * Date: 2017/6/22
 * Time: 9:11
 */

namespace App\Http\Controllers\Index;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;

class IndexController extends Controller
{
    //
    public function index(){
        dd('index/index');
    }
    public function test(){
        dd('index/test');
    }
}