MacOS环境下laravel5.8+vue+iview环境搭建

1、安装composer
直接访问https://getcomposer.org/官网
命令行如下：

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') === '48e3236262b34d30969dca3c37281b3b4bbe3221bda826ac6a9a62d6444cdb0dcd0615698a5cbe587c3f0fe57a54d8f5') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"`

2、安装laravel
使用阿里云的镜像来为composer进行加速

composer config -g repo.packagist composer https://mirrors.aliyun.com/composer/

然后通过composer来创建项目

composer create-project --prefer-dist laravel/laravel hiver

3、后台环境搭建
后台我们使用laravel-admin来加速我们的开发

composer require encore/laravel-admin
// 发布资源
php artisan vendor:publish --provider="Encore\Admin\AdminServiceProvider"
// 安装插件
php artisan admin:install

这里需要注意的是，在安装插件之前，需要先设置laravel项目的数据库，修改.env文件的数据库配置即可

最后通过https://laravel-admin.org/extensions来安装laravel-admin三方插件来方便我们的开发。

基本上根据要求来配置就可以正常使用这些插件，这里我要补充的是关于数据库备份这个插件的配置过程。

我们需要修改config/database.php配置文件中mysql结点

'mysql' => [
        'driver' => 'mysql',
        'url' => env('DATABASE_URL'),
        'host' => env('DB_HOST', '127.0.0.1'),
        'port' => env('DB_PORT', '3306'),
        'database' => env('DB_DATABASE', 'forge'),
        'username' => env('DB_USERNAME', 'forge'),
        'password' => env('DB_PASSWORD', ''),
        'unix_socket' => env('DB_SOCKET', ''),
        'charset' => 'utf8mb4',
        'collation' => 'utf8mb4_unicode_ci',
        'prefix' => '',
        'prefix_indexes' => true,
        'strict' => true,
        'engine' => null,
        'dump' => [
            'dump_binary_path' => '/Applications/MAMP/Library/bin/', // only the path, so without `mysqldump` or `pg_dump`
        ],
        'options' => extension_loaded('pdo_mysql') ? array_filter([
                PDO::MYSQL_ATTR_SSL_CA => env('MYSQL_ATTR_SSL_CA'),
        ]) : [],
],

这样一来备份操作就可以正常了。

4、安装redis服务
直接访问官网https://redis.io/下载最新版的源代码
然后我们可以开始编译源代码来生成可执行文件

// 编译
sudo make test
// 安装
sudo make install
// 启动redis
拷贝启动文件
sudo cp src/mkreleasehdr.sh src/redis-benchmark src/redis-check-rdb src/redis-cli src/redis-server bin/
// 启动服务器
sudo ./redis-server

然后我们可以通过laravel-admin的插件来管理我们的redis服务

5、安装微信开发插件
这里我们建议使用https://www.easywechat.com/
具体安装以及使用访问直接看官网即可。

6、安装官方提供的浏览器自动化及测试 API
安装插件composer require --dev laravel/dusk
我在执行php artisan dusk:install会报错，原因估计是无法访问google官网的驱动下载地址，经过我的尝试，我们可以忽略这一步骤，直接更新我们的chrome驱动。
访问地址为https://chromedriver.chromium.org/home
然后下载我们需要的驱动，这里需要注意的是，驱动的版本必须和我们本机安装的chrome浏览器的版本一致，不然在执行测试的时候会报错。
下载的驱动文件我们解压然后拷贝到vendor/laravel/dusk/bin文件夹下覆盖老版本的执行程序
然后我们继续执行来查看我们安装的是否正确。

php artisan dusk
// 或者
php artisan dusk:fails

7、安装i18n
https://github.com/caouecs/Laravel-lang
我们使用的是laravel5.8，因此我们要安装4.0版本

composer require caouecs/laravel-lang:~4.0

然后修改我们的config/app.php配置文件

// 修改中国时区
'timezone' => 'PRC',
// 修改本地语言
'locale' => 'zh-CN',

这样一来，后台我们就搭建好了，直接使用laravel-admin的默认用户名和密码admin/admin即可访问后台了。

8、前台环境搭建
根据laravel的操作手册，我们先安装前端

// 安装npm包管理器
npm install
// 编译前端
npm run dev

然后我们就可以访问首页了。

9、iview前端框架入门
laravel默认使用的是bootstrap和vue.js来开发前端，而我准备使用iview来建立前端，官方地址为https://www.iviewui.com/

首先我们要安装iview和vue-router

npm install iview --save
npm install vue-router --save

以下步骤参考自iview官方范例https://github.com/iview/iview-project

第一步：修改routes/web.php

<?php
Route::get('/', function () {
    //return view('welcome');
    return view('index');
});

第二步：在components文件夹下创建app.vue和index.vue
注意以下所有步骤都是创建在resource文件夹下，我们通过执行npm run dev操作会自动生成文件到public目录下
app.vue

<style scoped>
    @import '../../sass/common.scss';
</style>
<template>
    <div>
        <router-view></router-view>
    </div>
</template>
<script>
    export default {
        data () {
            return {}
        },
        mounted () {
        },
        beforeDestroy () {
        },
        methods: {
        }
    }
</script>

index.vue

<style scoped lang="sass">
    .index
        width: 100%
        position: absolute
        top: 0
        bottom: 0
        left: 0
        text-align: center
        h1
            height: 150px
            img
                height: 100%
        h2
            color: #666
            margin-bottom: 200px
            p
                margin: 0 0 50px
        .ivu-row-flex
            height: 100%
</style>
<template>
    <div class="index">
        <Row type="flex" justify="center" align="middle">
            <Col span="24">
                <h1>
                    <img src="../../images/logo.png">
                </h1>
                <h2>
                    <p>Welcome to your iView app!</p>
                    <Button @click="handleStart">Start iView</Button>
                </h2>
            </Col>
        </Row>
    </div>
</template>
<script>
    export default {
        methods: {
            handleStart () {
                this.$Modal.info({
                    title: 'Bravo',
                    content: 'Now, enjoy the convenience of iView.'
                });
            }
        }
    }
</script>

以上注意的是我们的css使用的是scss，因此在页面里可以直接忽略大括号和分号，不然在编译的时候会报错。

第三步：在js文件夹下创建app.js和router.js
app.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './components/app.vue';
import Routers from './router.js';
import iView from 'iview';
import 'iview/dist/styles/iview.css';

Vue.use(VueRouter);
Vue.use(iView);

// The routing configuration
const RouterConfig = {
    routes: Routers
};
const router = new VueRouter(RouterConfig);

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

router.js

const routers = [
    {
        path: '/',
        meta: {
            title: ''
        },
        component: (resolve) => require(['./components/index.vue'], resolve)
    }
];
export default routers;

第四步：在views文件夹下创建index.blade.php

<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>天津海文科技有限公司</title>
</head>
<body>
<div id="app"></div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

注意该文件为vue的单一入口文件

第五步：创建images文件夹来存放图片
第六步：在sass文件夹下创建common.scss文件来编译样式表
第七步：修改webpack.mix.js文件

mix.js('resources/js/app.js', 'public/js')
    .js('resources/js/router.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .sass('resources/sass/common.scss', 'public/css')
    .copyDirectory('resources/images', 'public/images');

最后执行npm run dev就会显示如下界面

iview.jpg