非你网

A VirtualBox machine with the name 'homestead' already exists.
Please use another name or delete the machine with the existing
name, and try again.

Do

之前在mac上安装laravel/homestead vagrant虚拟机环境时由于参照的教程是： 每次都必须在~/Homestead目录下边运行vagrant up/halt命令，觉得实在是不方便，于是乎按照另外一个教程（在任何目录下可以通过homestead up来启动虚拟机）来配置环境，但是当键入homestead up时，却报出

==> default: Importing base box 'laravel/homestead'...

==> default: Matching MAC address for NAT networking...

A VirtualBox machine with the name 'homestead' already exists.

Please use another name or delete the machine with the existing

name, and try again.

这样的错误

stackoverflow上好几个人说通过vagrant global-status 查看虚拟器，然后在vagrant destroy {id}删除对应名称的虚拟机可以解决问题，但是重复n遍homestead up或者到~/Homestead下运行vagrant up之后,还是会报出上边的错误，后来通过VBoxManage list vms获取虚拟机列表，然后在通过运行

VBoxManage unregistervm homestead --delete

之后，重新运行homestead up之后 一切回归正常

参考

https://www.cnblogs.com/huangye-dream/p/4604973.html

阅读全文 >>

安装 element-plus

https://element-plus.org/zh-CN/guide/installation.html

pnpm install element-plus

配置按需引入

首先安装 unplugin-vue-components 和 unplugin-auto-import 这两款插件。

pnpm add -D unplugin-vue-components unplugin-auto-import

编辑 vite.config.ts，添加以下配置。

import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

阅读全文 >>

只是想用 vue3 + ts + element-plus 技术栈做一个后台管理系统。ui 组件库蛮多的，还是觉得各个方面 element-plus 都不错，就选它。还有一些其他的插件比如 tailwindcss，echarts 等。不想那么咋，就先不用。echarts 后边肯定是会用上。

https://cn.vuejs.org/guide/introduction.html

https://element-plus.org/zh-CN/#/zh-CN

功能点

1. 多语言（可有可无）
2. 多主题（这个还是得搞上）
3. loading
4. api 请求
5. 动画
6. 动态路由（路由全部由接口产生）

开始吧

# 创建项目
pnpm create vue

# 项目名称 simpleAdmin
# 选择使用 ts
# 选择 vue router
# 选择 pinia
# 选择 eslint
# 选择 prettier format code
# 其他我都不要

阅读全文 >>

# 在 mysql 中，先查询出 sql_mode
show variables like 'sql_mode';

# 编辑修改
sudo vim /etc/mysql/mysql.conf.d/mysqld.cnf

# 没有就追加，有就修改
# 先备份一个全的
# sql_mode=ONLY_FULL_GROUP_BY,STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISION_BY_ZERO,NO_ENGINE_SUBSTITUTION

sql_mode =这里你填需要的

# 重启
sudo service mysql restart

阅读全文 >>

https://learnku.com/docs/laravel/10.x/octane/14909#swoole

https://segmentfault.com/a/1190000040673969

https://chriswhite.is/coding/swoole-vs-roadrunner-for-laravel-octane/

composer require laravel/octane

# 选择 swoole
php artisan octane:install

# 安装 swoole
pecl install swoole

# 查找 php.ini 文件位置
php -i grep | php.ini

# vim 编辑，并配置
extension=swoole.so

# 重启 php
sudo /etc/init.d/php-fpm restart

# 查看扩展
php -i |grep swoole

阅读全文 >>

配置、打包、部署

因为想部署到非根目录下。所以需要明确配置该非根目录的目录名。

修改 nuxt.config.js

import postcss from './postcss.config'

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: false },
  css: [
    '@/assets/css/main.scss'
  ],
  postcss,
  app: {
    baseURL: '/nuxt/'
  }
})

其中， app: { baseURL: ''} 就是配置目录的。

阅读全文 >>

首页就按照原网站的图弄弄。图片资源从以往的库中复制过来。

<template>
    <NuxtLayout name="base">

        <div class="container flex">
            <div class="md:w-1/3 flex flex-col">
                <span class="text-black text-xl font-semibold mt-16">约拍宝</span>
                <a class="text-blue-500 text-sm mt-3" href="https://www.yuepaibao.com" target="_blank">官方网站</a>

                <p class="text-gray-600 text-sm mt-3">约拍宝是一款专业摄影类平台,主要服务于爱拍摄的人群。用户可以在平台上进行交互约定支付等来促成合作，还可以发布作品供其他用户欣赏、评论等。</p>

                <div class="mt-5">
                    <img class="w-40 h-40 shadow-sm rounded-md inline mr-5 mb-4" src="../assets/image/home/ypb_miniapp.jpg" alt="约拍宝小程序"  />
                    <img class="w-40 h-40 shadow-sm rounded-md inline mb-4" src="../assets/image/home/ypb_iosapp.jpg" alt="约拍宝 ios app"  />
                </div>

                <div class="mt-1">
                    <img class="w-40 h-40 shadow-sm rounded-md inline mr-5 mb-4" src="../assets/image/home/ypb_baidu.png" alt="百度小程序"  />
                    <img class="w-40 h-40 shadow-sm rounded-md inline mb-4" src="../assets/image/home/ypb_douyin.png" alt="抖音小程序"  />
                </div>
            </div>

            <div class="md:w-2/3 p-10 flex">
                <img class="w-full object-contain max-w-3xl" src="../assets/image/home/ypb.jpg" />
            </div>
        </div>
    </NuxtLayout>
</template>

效果是这样子的。

阅读全文 >>

有追求，自然会把尽力把每一个地方做到最好。有这样一个场景，中间实体内容很少。这个时候不做特殊处理，如果是正常排版下来，底下会出现很大空白。这样就不好看。既然知道了，那就想办法去解决掉。

先截图看看我说的这个场景。底部我还没完善哈。但是底部下边一大片空白。这样体验就不好了。只是一般网页的内容都会比较多，会把底部堆下去。总不能保证每个页面都能堆下去。

阅读全文 >>

安装好了 tailwindcss 以及相关的插件后。也安装一下 vscode 对应的插件。常规网站，顶部，底部一般都是公用的，我们可以提取出来，作为 layout。然后是自适应问题，tailwindcss 已居右自适应的特性。我们再扩展一下啊，支持得更宽一点。现在电脑，分辨率也都已经很高了。支持的多一点，体验也会好一些。然后正如 bootstrap 框架一样。container 容器，我们还是要用的。tailwindcss 默认的 container 是不居中的，我们可以在插件中配置一下。默认就居住。其实居中和 bootstrap 一样，都是使用 margin:auto 来搞定的。

那么开始吧。

配置断点和容器

编辑 tailwind.config, 先扩充宽度。也可以更多点。

  …
  theme: {
    extend: {},
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
      '3xl': '1782px',
    }
  },

然后设置容器，让其默认就居中。相同的位置，增加 container 配置。其中，center 为 true 时，container 容器默认就居中，这个和 bootstrap 一样了。然后 padding 设置的是每个节点下的内边距。

  …
  theme: {
    extend: {},
    container: {
      center: true,
      padding: {
        DEFAULT: '1rem',
        sm: '2rem',
        lg: '4rem',
        xl: '5rem',
        '2xl': '6rem',
        '3xl': '6rem',
      },
    },
    …

阅读全文 >>

还是以 vue 项目为例，去配置和使用 tailwindcss

官网 https://tailwindcss.com/docs/installation/using-postcss

安装 vue 项目

安装 vue 项目

# 创建
pnpm create vue

# 选择配置，尽量选 TypeScript、Router、Pinia、ESLint、Prettier 这些。你做一个大的项目，这些都是必须的

我们把 package.json 中的 type 设置成 module。遵循使用 es 模块规范。

{
  …,
  "type": "module"
}

然后运行起来看看。

阅读全文 >>