4-3
1 Nuxtjs
[1] https://nuxt.com/docs/getting-started/introduction
[2][项目模板nuxt3-awesome-starter](https://github.com/viandwi24/nuxt3-awesome-starter)
2 TailwindCss
[1] 如何评价CSS框架TailwindCSS？ - 山月的回答 - 知乎 https://www.zhihu.com/question/337939566/answer/1752928891
3 杀死指定端口
lsof -i :3000
# 找到pid 再kill
kill -9 xxx
是L的小写，不是i，注意
lsof：全名是 "LiSt Open Files"，用于列出当前系统中所有打开的文件、网络连接等信息，并且可以显示进程名、进程 ID、用户 ID、文件描述符、文件类型和路径等详细信息
[1][mac 终端命令kill掉某个指定端口](https://developer.aliyun.com/article/657251)
4 Dotenv 加载文件配置环境变量
node -r dotenv/config bin/server.js dotenv_config_path=.env
5 删除无效的镜像
# 删除的镜像
docker image prune -f
6 linux后台运行软件
有多种方案，这里使用screen
# 新开一个名为clash的窗口
screen -S clash
# 按下 ctrl+a 再按 d
# 查看有哪些窗口
screen -ls
# 恢复clash窗口
screen -r clash
# 杀死窗口（只能一个一个杀）
screen -X -S 4588 quit
7 阿里云OSS无法上传问题
- 没有配置跨域
8 小程序设置全局 box-sizing: border-box;
思想：给所有标签设置属性
page,text,view,navigator,swiper,swiper-item,image{
/*设置组件全局边距*/
margin: 0px;
padding: 0px;
/*
* 指定元素的宽或高包含padding和border，不包含mmargin。
* 如果不设置默认为content-box，元素的宽或高不包含padding和border
*/
box-sizing: border-box;
}
9 vxe-table 使用注意
特点：
- 标签实现，非canvas，只渲染一屏元素
- 万条数据不卡顿
注意：
更新数据使用
reloadRow(row, records?, filed?)方法，注意表格要开启keep-source而非使用更新 data 的方式，因为会重新渲染当前屏幕所有元素
参考
[1][vxe-table-demo](https://github.com/xuliangzhan/vxe-table-demo)
[2][vxe-table文档](https://vxetable.cn)
10 扩充 ts 类型声明示例
// 要先导入需扩充类型，否则无法正确扩充
import { CustomThemeCommonVars } from 'naive-ui'
declare module 'naive-ui' {
export interface CustomThemeCommonVars {
secondaryColor: string
secondaryColorHover: string
secondaryColorPressed: string
secondaryColorSuppl: string
tertiaryColor: string
tertiaryColorHover: string
tertiaryColorPressed: string
tertiaryColorSuppl: string
textColorInverse: string
textColor4: string
}
}
export {}
11 Nuxtjs 使用总结
TODO
问题
如何区分代码在服务器执行还是客户端执行？
window为什么在 setup 下无法访问，而是要放入钩子函数中，例如：onBeforeMounted()
nuxtjs3.4 useState 不更新问题
12 Nuxtjs 登录
不需要使用 @nuxt/auth库
14 remote-jobs
[1][remote-jobs](https://github.com/remoteintech/remote-jobs)
15 NUXT3 fetch拦截器简单封装
[1][NUXT3 fetch拦截器简单封装](https://juejin.cn/post/7173507227104313352)
[2][Nuxt3 服务端接口与客户端接口请求最佳实践](https://juejin.cn/post/7199250953333522491) (带文件上传)
关联：
[1][历时两个月！Nuxt3从入门到实战！你值得收藏！](https://juejin.cn/post/7037336504418435103#heading-29)
16 Echarts
{
tooltip: {
trigger: 'axis',
position: function (pt) {
return [pt[0], '10%']
},
formatter: (params: any) => {
const item = params[0]
const template = `${item.data[0]}<br/>${item.data[1]}`
return template
},
backgroundColor: 'var(--bg-0)',
borderColor: 'var(--bg-0)',
textStyle: {
color: 'var(--text-color-base)',
},
axisPointer: {
lineStyle: {
color: 'var(--success-color)',
width: 2,
},
},
},
xAxis: {
type: 'time',
axisLabel: {
color: 'var(--text-color-4)',
},
axisLine: {
lineStyle: {
color: 'var(--bg-2)',
},
},
},
yAxis: {
type: 'value',
axisLabel: {
color: 'var(--text-color-4)',
formatter: function (value: any) {
return value
},
},
splitLine: {
lineStyle: {
color: 'var(--bg-2)',
type: 'dashed',
},
},
boundaryGap: [0, '100%'],
},
series: [
{
type: 'line',
smooth: true,
symbol: 'emptyCircle',
symbolSize: 12,
showSymbol: false,
lineStyle: {
color: 'var(--success-color)',
width: 3,
},
itemStyle: {
// 圆圈样式
color: 'var(--success-color)',
borderWidth: 3,
},
emphasis: {
lineStyle: {
color: 'var(--success-color)',
width: 3,
},
itemStyle: {
shadowBlur: 8, // 图形的阴影大小
shadowColor: 'var(--success-color)', // 图形的阴影颜色
},
},
areaStyle: {
color: new echarts.graphic.LinearGradient(
// (x1,y1) 点到点 (x2,y2) 之间进行渐变
0,
0,
0,
1,
[
{ offset: 0, color: 'rgba(89, 173, 113, 0.4)' }, // 0 起始颜色
{ offset: 1, color: 'rgba(89, 173, 113, 0)' }, // 1 结束颜色
]
),
},
data: props.data,
},
],
grid: {
left: 0,
right: 10,
top: 10,
bottom: 0,
containLabel: true,
},
}
17 嵌入地图
[1][Leaflet](https://github.com/Leaflet/Leaflet)
[2][vue-leaflet](https://github.com/vue-leaflet/vue-leaflet)
18 嵌入聊天插件
19 useCountdown
function useCountdown() {
const countdownActive = ref(false)
const countdownDuration = ref(60 * 1000)
function renderCountdown({ hours, minutes, seconds }: any) {
return hours * 3600 + minutes * 60 + seconds
}
function handleCountdownFinish() {
countdownActive.value = false
}
function handleSend() {
formRef.value?.validate(
async (errors) => {
if (errors) {
return
}
loadingManager.send = true
try {
await login.sendEmailRegister({ email: formData.email })
message.success($t('tips.success.send'))
countdownActive.value = true
} finally {
loadingManager.send = false
}
},
(rule) => {
return rule?.key === 'email'
}
)
}
return {
countdownActive,
countdownDuration,
renderCountdown,
handleCountdownFinish,
handleSend,
}
}
20 Leaflet 加载地图
[1][Leaflet 学习系列（二）加载地图](http://0x0803.top/2018/05/27/gis-leaflet-tutorials-map-layer/)
21 useIsWindowVisible
function isVisibilityStateSupported() {
return 'visibilityState' in document
}
function isWindowVisible() {
return !isVisibilityStateSupported() || document.visibilityState !== 'hidden'
}
/**
* Returns whether the window is currently visible to the user.
*/
export default function useIsWindowVisible(): Ref<boolean> {
const focused = ref<boolean>(false)
const listener = () => {
focused.value = isWindowVisible()
}
onBeforeMount(() => {
if (!isVisibilityStateSupported()) {
return undefined
}
listener()
document.addEventListener('visibilitychange', listener)
return () => {
document.removeEventListener('visibilitychange', listener)
}
})
return focused
}
22 邮箱服务器解决方案
- 如何稳定的发邮件？
- 如何保证邮件不被标记为垃圾邮件？
23 Vitepress 总结
国际化
根据目录区分，zh目录下的文档即为中文文档，详见 internationalization
Md与Vue结合
vitepress支持在 .md 文件中使用vue语法，详见 Using Vue in Markdown
注意一点：需要把 <template> 标签删除
简单示例：
---
hello: world
---
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
The count is: {{ count }}
<button :class="$style.button" @click="count++">Increment</button>
<style module>
.button {
color: red;
font-weight: bold;
}
</style>
与taiwindcss结合
配置主题
思想：通过css变量去配置主题色，所有变量名见 default theme CSS variables，详见 Customizing CSS
改变样式
思想：覆盖样式的方法区改变样式
简单示例：
// 导航栏
.VPNav {
border-bottom: 2px solid var(--vp-c-border-2);
.title {
background-color: var(--vp-c-bg) !important;
}
.curtain {
// 隐藏窗帘
display: none;
}
}