雅荷心语博客
雅荷心语
心之所向便是光
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 关注本站
    • 微信
    • 微博
    • 腾讯微博
    • Twitter
    • Facebook
    • RSS订阅
Hi, 请登录     我要注册     找回密码

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

2017-06-22 分类：前端之旅 / 后端之路 阅读(1552) 评论(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) 这个文件,

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

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默认的不一样…

里面大概是这样:

1
2
3
4
5
6
7
8
9
"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

1
2
3
4
5
6
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

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

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

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

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

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

接下来依次安装

1
2
3
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,

里面内容大概如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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,

头部引入然后注入,

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

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

1
2
3
<div id="app">
      <router-view></router-view>
</div>

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

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

第二天继续系列…

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

首先找到 routes/web.php

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

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

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

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

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

接下来, composer update

然后找到 config/app.php

下拉找到一个数组

1
2
3
'providers' => [
...
]

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

加入后,打开控制台,

php artisan ide-helper:generate

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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方法,

最终如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?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');
    }
}

然后地址栏,默认打开是 带/#/的进入vue,我们删掉/#/,

访问我们上面建的路由,没错的话,你就可以看到控制器输出的信息了!

未完待续…

分享到：更多 ()
标签：laravelvue前端界面思路分析

相关推荐

  • 获取上传文件实时进度条的尝试
  • 使用PHPExcel生成表格数据并下载
  • 关于微信小程序Websocket的一些小坑
  • 记录几个常用的HTML空格占位符
  • 简单理解vue的slot内容分发
  • vue 官方推荐Nuxt.js 服务端渲染尝试!
  • Electron 生成的桌面应用破解方法
  • 使用 Electron 打包桌面应用

评论 抢沙发

取消

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
关于我

小天明 北京·朝阳 前端搬砖工程师

碎碎念):(来自公众号)

热门文章

  • 踩坑记录——iphone上safari开启隐身模式时localStorage变为只读-雅荷心语博客踩坑记录——iphone上safari开启隐身模式时localStorage变为只读2017-02-21评论(4)
  • 程序员是怎样一群人-雅荷心语博客程序员是怎样一群人2015-12-08评论(3)
  • git 操作那些小事-雅荷心语博客git 操作那些小事2017-03-04评论(2)
  • PHPStorm10 下载安装破解汉化-雅荷心语博客PHPStorm10 下载安装破解汉化2015-12-15评论(2)
  • call_user_func_array 这个函数什么时候用-雅荷心语博客call_user_func_array 这个函数什么时候用2016-09-02评论(2)
2019年十月
一 二 三 四 五 六 日
« 九    
 123456
78910111213
14151617181920
21222324252627
28293031  

最新评论

  • 前端小武 3年前 (2017-04-06)说：
    我看到了layer
  • 丁艳平 3年前 (2017-03-03)说：
  • Dawn 3年前 (2016-09-16)说：
    call_user_func_array最后的例子是错哦，你用bc方法去调用类里 另外一个方法就知道问题所在了。情况1.调用非静态方法 第一个参数应该传[类的实例,调用方法] (既然有类实例了直接-&
  • Dawn 3年前 (2016-06-21)说：
    tp框架设置了全局捕获异常的，这也没什么。坑的是 他捕获了异常。然后全部返回404。。。不知道的 还以为自己网站被删除了
  • Dawn 3年前 (2016-05-17)说：
    构造函数里的判断 用异常机制可能更好一些

左邻右舍

  • Brian's Blog
  • 易水寒
  • 楼教主
  • 贤心
  • 阿米龙

雅荷心语博客 -心之所向便是光

联系我们关于我们

© 2019 雅荷心语博客   网站地图

emlogdux_heademlogdux_footer