vue+uikit3+laravel快速建站

1. 前言
2. 需求
- 2.1. 页面
3. 环境
4. Let's code
- 4.1. 主页面
  - 4.1.1. 界面构思
  - 4.1.2. 实现

目前站已初步建好，待完善中，https://recallsufuture.space，源码已放到 github

1 前言

很早因为折腾科学上网之术，入了vps的坑，然而那个配置只是作为梯子的话实在是浪费资源，在加上做了一阵子的web开发，却还没自己的一个站，自己的小程序做不了，网站总可以的嘛，那么下面就开始吧。

2 需求

实际上还真不知到要做个什么样的网站，经过一番艰难的思考，还是决定先做已经被我做烂了的fa爬虫，如果有其他的想法，就做成新的板块，这样就可以慢慢填坑啦。

2.1 页面

主页面，展示本站作用以及现有板块
fa板块，批量爬取原图链接

3 环境

3.1 开发环境

php7.2
npm
composer
vscode
redis
chrome & firefox

3.2 生产环境

oneinstack一键环境，包括php，nginx，redis。
npm
composer

3.3 框架

前端用vue+uikit3制作足够模块化且现代化的页面，并用vue-router来提供路由支持
后端用laravel，优雅且强大

4 Let's code

4.1 主页面

4.1.1 界面构思

这个页面需要有顶部导航栏，主体需要有足够大而鲜明的说明标题文字来介绍本站，标题下面是几个card来展示现有的板块。

4.1.2 实现

首先是路由，默认的laravel用闭包写了一个welcome路由，这个我们不需要了，删掉routes/web.php内的这行路由，并删掉对应的blade文件。

因为我用了vue-router来管理路由，所以只需要在web.php中写一个拦截所有请求的路由即可，所有页面请求都导向vue页面，即：

Route::get('/{view?}', 'HomeController@index')->where('view', '.*')->name('home');

接着修改上面的HomeController的index方法，使它返回app.blade.php模板

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>夙的小站</title>

    <!-- Styles -->
    <link href="{{ mix('css/app.css') }}" rel="stylesheet">
</head>
<body>
    <div id="app"></div>

    <!-- Scripts -->
    <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

因为要用到uikit，所以去找了下脚手架，在网站根目录执行下面四条命令可以获得vue+uikit3脚手架：

composer require laravel-frontend-presets/uikit3
php artisan preset uikit3
php artisan preset vue
npm install

添加vue-router路由配置文件router.js：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router);

export default new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            redirect: '/home',
        },
        {
            path: '/home',
            component: require('./pages/Home.vue'),
        },
    ],
})

修改下app.js保证编译顺利通过，然后就可以开始在resources/assets/js/pages/Home.vue里写第一个vue页面啦。

此处省略一千字。。。直接看结果吧

扫描二维码关注公众号，回复： 2391439 查看本文章

Date: 2018-07-26 18:36

Author: su

Created: 2018-07-26 四 19:46

Validate