Write the Code. Change the World.

5月 29

当后端接口还没有完成的时候,前端没必要等。可以自己使用 mock 来构建服务端接口的环境和数据。自己动手,丰衣足食。

http://mockjs.com/

安装

pnpm add mockjs vite-plugin-mock -D

配置

在 vite.config.ts 中配置

import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import { defineConfig } from 'vite'
import { viteMockServe } from 'vite-plugin-mock'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    viteMockServe({ 
      supportTs: true,
      mockPath: "./src/mock/source", // 解析,路径可根据实际变动
      localEnabled: true, // 开发环境设为true,
      prodEnabled: false, // 生产环境设为true,也可以根据官方文档格式
      injectCode: 
      ` import { setupProdMockServer } from './src/mock';
        setupProdMockServer(); `,
      watchFiles: true, // 监听文件内容变更
      injectFile: resolve("src/main.ts"), // 在m
    })
  ]
})

新建数据

src/mock/source 下新建 user.ts 文件,内容如下:

export default [
  {
    url: "/api/users",
    method: "GET",
    response: () => {
      return {
        code: 0,
        message: "success",
        result: {
          nickname: '神奇动物在哪里',
          gender: 1
        },
      };
    }
  }
]

使用

import axios from 'axios'

axios.create({
  baseURL: import.meta.env.VITE_BASE_URL
})

axios.get("/api/users").then(res => { console.log(res); });

运行起来,看到控制台的网络中请求的状况:

请求网址: http://localhost:3000/api/users
请求方法: GET
状态代码: 200 OK
远程地址: 127.0.0.1:3000
引荐来源网址政策: strict-origin-when-cross-origin

# response
{code: 0, message: "success", result: {nickname: "神奇动物在哪里", gender: 1}}
code: 0
message: "success"
result: {nickname: "神奇动物在哪里", gender: 1}
gender: 1
nickname: "神奇动物在哪里"

阅读全文 >>

5月 26

原子化 css 的好用是真的好用。
https://antfu.me/posts/reimagine-atomic-css-zh

https://juejin.cn/post/7028841960752283656

https://blog.csdn.net/qq_41499782/article/details/124074678

https://blog.csdn.net/sg_knight/article/details/124097860

https://windicss.org/

https://github.com/unocss/unocss

使用 unocss

https://github.com/unocss/unocss

class 可以参考参考
https://www.tailwindcss.cn/docs/align-items

这里用 pnpm 来安装。

  • 安装添加
pnpm add unocss -D
  • 添加到 vite.config.ts 中
import vue from '@vitejs/plugin-vue'
import Unocss from 'unocss/vite'
import { defineConfig } from 'vite'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Unocss({})
  ]
})
  • main.ts 中引入
import 'uno.css'
  • 项目中使用
<div class="w-300px h-120px rounded-8px m-20px shadow-md">
</div>

仅仅用样式就可以实现宽300像素高120像素圆角8像素 margin 20 像素,带 md 程度的阴影的div盒子。这样多方便呀。

当你已经在使用了,可以通过 http://localhost:3000/__unocss 查看生成的 css 文件,是不是很人性化,文件量还小。

vue 面试题

https://vue3js.cn/interview/

阅读全文 >>

5月 25

都说 pnpm vite vue 组合好。那就试试。

# shenya 是项目名
pnpm create vite  shenya

cd shenya

pnpm install

pnpm run dev

如果从来没有使用过 pnpm,第一次创建的时候是要花一点时间。后边就是秒创建了哈。

阅读全文 >>

5月 25

vue cli 创建项目的时候,默认是不会 .env .env.production 这些文件的。一般,一个大型项目是需要用到不同环境的不同配置。这个时候,手动建立各个 .env 文件是必要的。起点就在 package.json 中的 scripts 里,默认就会有的。当然你可以手动定义名字,然后用 mode 指定。如:”staging”: “vue-cli-service serve –mode staging” 。

https://cli.vuejs.org/zh/guide/mode-and-env.html

如果是 vite 环境,不用 process,而是用 import.meta。 会有一些变化。请看:

https://cn.vitejs.dev/guide/env-and-mode.html#env-files

阅读全文 >>

5月 22

nuxt 走约定大于配置的路线,有些问题需要注意一下下。特意记录下来。

  1. 如果创建了 pages 目录,但是里边没有文件,就会出现 404。要不去掉 pages 页面,要不填充必须的页面。

  2. 试用 NuxtLayout 的时候,layouts 目录下的模板名不要叫 default.vue,会渲染成双倍的 div。

相关

https://juejin.cn/post/7038957796351541261

https://juejin.cn/post/7080007366808666119

https://juejin.cn/search?query=nuxt3

https://juejin.cn/post/6844903906200256525

阅读全文 >>

5月 22

服务端渲染

https://vue3js.cn/interview/vue/ssr.html

https://v3.nuxtjs.org/getting-started/quick-start

这里尝试下 vue ssr 项目。可是,真正应用到项目上,还得服务端做好支持和配置。pm2,nginx 这些也是要处理

演示结果:

初始化安装 nuxt 项目

个人喜欢用 yarn 的

npx nuxi init mengmeng

cd mengmeng

# 加入版本控制
git init 

git add .

git commit -m 'nuxt 初始化项目'

yarn install

# 启动起来看看
yarn dev

构建基本 layout 和 跳转

一个 pc 端网站,通常有顶部,中间部分,底部三个部分构成,而顶部和底部,几乎是共用不变的。这种场景,我们很容易想到抽象成模板的方式来做。不过,网站除了这些共用外,还有其他地方共用,暂时就不考虑那么细致。

  • 先删除 app.vue
  • 创建 layouts 目录,在目录中建立一个 base.vue 的模板。内容如下:
<template>
<div class="base-container">
  <div class="header"></div>
  <div class="body">
    <slot></slot>
  </div>
  <div class="footer"></div>
</div>
</template>

<style>
*,
html,
body {
  margin: 0;
  padding: 0;
}
</style>

<style lang="scss" scoped>
.base-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;

  .header {
    display: flex;
    width: 100%;
    height: 80px;
    background-color: aquamarine;
  }

  .body {
    display: flex;
    flex: 1;
  }

  .footer {
    display: flex;
    width: 100%;
    height: 160px;
    background-color: bisque;
  }
}
</style>
  • 新建 pages 目录,该目录下新建 index.vue 文件,该文件作为项目的首页。代码如下:
<template>
<NuxtLayout name="base">
  <div class="container">
    <NuxtLink to="/meets"><h4>meets</h4></NuxtLink>
  </div>
</NuxtLayout>
</template>

<script setup>
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 20px 30px;
}
</style>

meets 是另一个路由对应文件,下边会建立。
– 新建 meets 目录,meets 下新建 index.vue 文件。index 是默认映射。 内容如下。

<template>
<div>
<NuxtLayout name="base">
<div class="container">
  <NuxtLink to="/"><h4>home</h4></NuxtLink>
  <NuxtLink to="/meets/5"><h4>详情一</h4></NuxtLink>
</div>
</NuxtLayout>
</div>
</template>

<script>
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 20px 30px;

  h4 {
    margin-top: 12px;
  }
}
</style>

/meets/5 是另一个路由文件,下边会建立

  • meets 下新建 [id].vue 文件,[]包含的是动态映射,动态详情很好用。 内容如下:
<template>
<NuxtLayout name="base">
  <div class="container">
    <h4>id {{ id }}</h4>
  </div>
</NuxtLayout>
</template>

<script setup>
import { ref } from 'vue'

const route = useRoute()

const id = ref(route.params.id)
</script>

<style lang="scss" scoped></style>

这几个文件,串起来就可以组成首页、列表页、详情页三个页面。这刚好是一个项目最基本的构件。上边这些只是最基础最基础的一点点东西。要做好整个项目,这些是远远不够的。

使用 vuetify 作为 ui 框架

https://next.vuetifyjs.com/en/getting-started/installation/

vue add vuetify 

阅读全文 >>

5月 15

强迫症。不喜欢开机自启动向日葵。那么就关掉向日葵自启动吧。这里是 mac

操作

打开终端,编辑下边这些文件,将 Disabled 的值改为 即可。

cd /Library/LaunchAgents/
sudo vim com.oray.sunlogin.agent.plist
sudo vim com.oray.sunlogin.startup.plist

cd /Library/LaunchDaemons
sudo vim com.oray.sunlogin.helper.plist
sudo vim com.oray.sunlogin.plist

阅读全文 >>

5月 14

https://github.com/barryvdh/laravel-debugbar

### 安装
composer require barryvdh/laravel-debugbar --dev

### 生成配置文件 config/debugbar.php
php artisan vendor:publish --provider="Barryvdh\Debugbar\ServiceProvider"

### 修改配置文件,设置 enabled 项
'enabled' => env('APP_DEBUG', false)

启用分析器后,网站底部会出现 debug 工具栏,可以看到执行的 mysql 语句等。可以发现和解决不合理的 ORM 问题。

阅读全文 >>