上一篇，把基本的构建做成了。不过，页面不够完善。现在结合接口，来做一波。尽管如此，这篇没有使用的 vuex 状态管理，也是不完美的。
前边写了一个 laravel mix vue 的基本构造使用。虽然那种结构能跑起来，可受限 laravel 自己的功能。这次，要利用 vue 的优势，elemeui 的优势，独立去构建项目。
前边一部分操作是一样的。
从零开始操作
这里以 laravel7 为例子，来使用 vue。
先安装 laravel 7
composer create-project laravel/laravel --prefer-dist testvue.cn "7.*"
cd testvue.cn
# 查看 laravel 的版本(发现是 7.22.4)
php artisan -V
# 创建 git 仓库
git init
git add .
git commit -m 'laravel 7.22.4 initialize'
浏览器访问 testvue.cn， 发现能正常访问到 laravel 基础页面（之前已经配合域名映射这些）。
laravel 初始化是不带 ui 这些的，可它天生支持 bootstrap，vue，react 这些。只需要安装配置下即可。
从零开始操作
这里以 laravel7 为例子，来使用 vue。
先安装 laravel 7
composer create-project laravel/laravel --prefer-dist testvue.cn "7.*"
cd testvue.cn
# 查看 laravel 的版本(发现是 7.22.4)
php artisan -V
# 创建 git 仓库
git init
git add .
git commit -m 'laravel 7.22.4 initialize'
浏览器访问 testvue.cn， 发现能正常访问到 laravel 基础页面（之前已经配合域名映射这些）。
laravel 写接口的时候，通常会建立 request。在 request 中验证一些参数。这个时候用 postman 或其他请求时候，会发生返回 html 的情况，非 json 格式。该么处理呢。
简单操作一下
TestController.php
public function store(TestRequest $request)
{
$result = $request->only(['name', 'num']);
return response()->json($result)->setStatusCode(201);
}
小程序 swiper 组件，没有禁止手动滑动的属性。可这个功能体验很重要。该怎么实现呢。有人觉得在上边盖一层，这样虽然可以实现禁止滑动了，可和 swiper 里边的交互就不能实现了。这样也不好。还有一种方式，在 swpier-item 上增加拦截事件。
<swiper class="swiper" :duration="600" :disable-touch="false">
<swiper-item v-for="(item, index) in menus" :key="index" catchtouchmove="catchTouchMove" @touchstart.stop="catchTouchMove" >
<span>{{item}}</span>
</swiper-item>
</swiper>
...
# vue methods
catchTouchMove() {
return false;
},
项目弄好了，就要做发布的准备。主要是部署的非根目录的配置。
这里，配置在根目录下的 admin 目录。
修改 config/config.ts,增加下边的配置：
…
base: '/admin/',
outputPath: '../../public/admin',
publicPath: '/admin/',
manifest: {
basePath: '/admin/',
},
修改 nginx, 增加下边的配置：
location /admin {
index index.html index.htm;
try_files $uri $uri/ /admin/index.html;
}
linux 下使用 ant design pro 安装依赖的时候，会出现 /bin/sh: 1: umi: not found 问题。需要更改编译模式。
cd /bin
ls -lh sh
# 结果 lrwxrwxrwx 1 root root 4 Jan 21 2020 sh -> dash
下边将 dash 改成 bash。
sudo dpkg-reconfigure dash
# 选择 no 保存即可。
# 然后再执行 ls -lh sh 发现结果是
lrwxrwxrwx 1 root root 4 Jul 28 11:09 sh -> bash
好了，就这样了。
前边登录页面也修改了。但细节还是需要去处理。
- Alert 用在登录面板里，觉得比较丑。还是用 message 组件来处理。
- Card 加上了 box-shadow 。
- 全部用多语言来控制。
还是那句话，喜欢简洁，有强迫症，就是想弄。那么，从路由和注册登录开始。先去掉其他路由，仅仅保存注册登录和welcome。去掉其他页面，从零开始。
修改路由
编辑 /config/config.ts,修改路由配置如下：
routes: [
{
path: '/user',
layout: false,
routes: [
{
name: 'login',
path: '/user/login',
component: './user/auth',
},
{
name: 'register',
path: '/user/register',
component: './user/auth',
}
],
},
{
path: '/welcome',
name: 'welcome',
icon: 'smile',
component: './Welcome',
},
{
path: '/',
redirect: '/welcome',
},
{
component: './404',
},
],
注册和路由都进同一个 component, 然后根据路由进行不同的渲染。
ant design pro v5 在
/src/components/下暴露一些顶栏以及底栏的功能。可以在这里进行其功能定义。之前就说过，ant design pro 很多地方不完美，需要自己去打造和改变。
作为一个疯狂的极简的完美追求者， 打开 /src/components/RightContent/ 下的 index.tsx,删掉只剩下这么点东东了。
return (
<Space className={className}>
<Avatar />
{REACT_APP_ENV && (
<span>
<Tag color={ENVTagColor[REACT_APP_ENV]}>{REACT_APP_ENV}</Tag>
</span>
)}
</Space>
);
然后就只剩下头像和昵称了。
删掉 /src/components/HeaderSearch 这个目录。如果需要什么，再自己扩展。删掉不需要的引用。
修改 Avatar，暴露出个人中心等 dropMenu。虽然暴露了，可没有对应的路由页面，点击是 404 。如果想关掉，去掉 menu 设置。如果想扩展 dropMenu 的功能，可以在 ./AvatarDropdown 里边修改逻辑。
<Avatar menu={true} />