非你网

前边一篇说了 element-plus 覆盖主题色的操作。这边就要做多主题的处理。也就是除了默认的主题，还得增加一个暗黑主题。

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

Do

思路还是一样，覆盖主题（颜色，间距等）。

# 创建
touch assets/styles/element-dark.scss

@forward 'element-plus/theme-chalk/src/dark/var.scss' with (
  $bg-color: (
    'page': #0a0a0a,
    '': #626aef,
    'overlay': #1d1e1f,
  ),
  $colors:(
    "primary": ("base": green),
  )
);

@use "element-plus/theme-chalk/src/dark/css-vars.scss" as *;

在 vite.config.ts 中引入。

    preprocessorOptions: {
      scss: {
        additionalData: `
          @use "@/assets/styles/element.scss";
          @use "@/assets/styles/element-dark.scss";
        `,
      },
    },

这样，样式就好了。可以手动在 html 节点加入 class="dark" 看看效果。发现背景颜色已经是黑色（#0a0a0a）了。

阅读全文 >>

多主题，是一个站点的常规配置。至少白天主题和夜晚主题是必须要有的。 element-plus 提供了一个很好的实现多主题的方案。先从修改默认主题色开始。

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

开始

先安装 sass

pnpm add -D sass

再创建覆盖默认主题颜色的 sass 文件

# 创建
touch assets/styles/element.scss

# 填充以下内容
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': #003261,
    ),
    'success': (
      'base': #21ba45,
    ),
    'warning': (
      'base': #f2711c,
    ),
    'danger': (
      'base': #db2828,
    ),
    'error': (
      'base': #db2828,
    ),
    'info': (
      'base': #42b8dd,
    ),
  ),
  $button-padding-horizontal: (
    'default': 80px,
  )
);

阅读全文 >>

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>

效果是这样子的。

阅读全文 >>

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

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

阅读全文 >>