直接用 laravel ui 以及 webpack.mix.js 来打包编译纯 vue 项目，也会出现尴尬场面。比如，使用的路由问题，根目录问题以及路由的 rowserHistory 和 hashHistory 选择上，都会出现尴尬情况。如果只是单纯的后台，非根目录项目，还不如独立建立一个文件夹，来组织打包来的爽快。
上一篇，把基本的构建做成了。不过，页面不够完善。现在结合接口，来做一波。尽管如此，这篇没有使用的 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, 然后根据路由进行不同的渲染。