美文网首页
MacOS环境下laravel5.8+vue+iview环境搭建

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

作者: delicacylee | 来源:发表于2019-07-21 18:37 被阅读0次

    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

    相关文章

      网友评论

          本文标题:MacOS环境下laravel5.8+vue+iview环境搭建

          本文链接:https://www.haomeiwen.com/subject/gdlvlctx.html