时间久了,官方 node 版本一直在生,而本地的一直停滞不前。也想生到和官方一样的。咋操作呢。
操作一波
# 没错,对,就是安装 n, 这个 node 版本管理工具
npm i -g n
安装好 n 后,就可以使用它了。
常用命令
- n list 列出当前 node 的最新版本
- n stable 安装 node 最新稳定版
- n latest 安装最新版本
- n 11.12.0 安装指定的版本
时间久了,官方 node 版本一直在生,而本地的一直停滞不前。也想生到和官方一样的。咋操作呢。
# 没错,对,就是安装 n, 这个 node 版本管理工具
npm i -g n
安装好 n 后,就可以使用它了。
常用命令
直接用 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
好了,就这样了。
前边登录页面也修改了。但细节还是需要去处理。