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就会显示如下界面
