锐客网

  1. 首页 > it技术 > >

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

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

index.vue
.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%

以上注意的是我们的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
getLocale() }}"> 天津海文科技有限公司 - 锐客网

注意该文件为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就会显示如下界面

MacOS环境下laravel5.8+vue+iview环境搭建笔记
文章图片
iview.jpg 【MacOS环境下laravel5.8+vue+iview环境搭建笔记】

    推荐阅读


    上一篇：小蜗牛成长记――第16天

    下一篇：喝（|喝（ huō ）酒