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 是另一个路由对应文件，下边会建立。
<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 问题。
5月
11
vue 项目中，出现 Component name “home” should always be multi-word.eslint 这个错误提示，可以改两个地方。
处理方式
修改 vue.config.js 文件，在 defineConfig 中加入 lintOnSave: false ，这个保证编译不会报错。
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false
})
修改 .eslintrc.js 文件，在其中追加配置 overrides 。注意自己的 vue 文件目录配置好。这个保证在 vue 文件中，不会出现警告的波浪线。有强迫症的受不了。
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/typescript/recommended'
],
parserOptions: {
ecmaVersion: 2020
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
},
overrides: [
{
files: ['src/views/**/*.vue'],
rules: {
'vue/multi-word-component-names': 0,
}
}
]
}
5月
08
升级 node，vue-cli 到最新版本
node -v
# 更新 node 到最新版本
sudo n stable
# 更新 pnpm
pnpm add -g pnpm
# 更新 yarn
yarn set version latest
# pnpm 安装 @vue/cli
pnpm install @vue/cli -g
# 或使用 yarn 安装
yarn global add @vue/cli
# 创建项目,指定包管理工具
vue create -m pnpm demo
创建 vue 项目
这里就建一个 ts 的，使用 sass 的 vue3.x 项目,使用手动选择模式，包管理工具使用 yarn 。一路选择和回车即可：
vue create -m yarn zeipan
? Please pick a preset:
Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
❯ Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
◉ Babel
◉ TypeScript
◯ Progressive Web App (PWA) Support
◯ Router
◯ Vuex
❯◉ CSS Pre-processors
◉ Linter / Formatter
◯ Unit Testing
◯ E2E Testing
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
❯ 3.x
2.x
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
❯ Sass/SCSS (with dart-sass)
Less
Stylus
一路选择回车后，提示安装成功。进入项目，运行项目。
cd zeipan
yarn serve
5月
07
npm 简单介绍
npm 中文文档
npm 英文官网
npm 为你和你的团队打开了连接整个 JavaScript 天才世界的一扇大门。它是世界上最大的软件注册表，每星期大约有 30 亿次的下载量，包含超过 600000 个 包（package） （即，代码模块）。来自各大洲的开源软件开发者使用 npm 互相分享和借鉴。包的结构使您能够轻松跟踪依赖项和版本。
npm 由三个独立的部分组成：
网站
注册表（registry）
命令行工具 (CLI)
网站 是开发者查找包（package）、设置参数以及管理 npm 使用体验的主要途径。
注册表 是一个巨大的数据库，保存了每个包（package）的信息。
CLI 通过命令行或终端运行。开发者通过 CLI 与 npm 打交道。
npm 下载安装
https://nodejs.org/en/download/
下载对应的系统对应的版本安装即可。
配置淘宝镜像
# 配置为淘宝镜像（旧的）
npm config set registry https://registry.npm.taobao.org
# 配置为淘宝镜像（新的）
npm config set registry https://registry.npmmirror.com
# 查看镜像
npm config get registry
# 切回默认镜像
npm config set registry https://registry.npmjs.org
更新升级 node， 方式一
# 查看当前 node 版本
node -v
# 查看 node 的版本
npm view node versions
# 安装 n
sudo npm install -g n
# 通过 n 来更新 node 到最新版本
sudo n latest
# 通过 n 来更新 node 到稳定版本
sudo n stable
# 通过 n 来更新 node 到具体版本
sudo n 15.0.0
更新升级 node， 方式二
# 最新版本
npm install npm@latest -g
# 下一个版本
npm install npm@next -g
yarn 简单介绍
yarn1 中文文档
yarn2 中文文档
Yarn 对你的代码来说是一个软件包管理器， 你可以通过它使用全世界开发者的代码，或者分享自己的代码给全世界的开发者。Yarn 做这些事情快捷、安全、可靠，所以你不用担心什么。
通过 Yarn 你可以使用其他开发者针对不同问题的解决方案，简化你开发软件的过程。 如果使用过程中遇到问题，你可以将其上报或者贡献解决方案。一旦问题被修复， 你可以使用 Yarn 更新。
代码通过 软件包（package） 的方式被共享。一个软件包里包含了所有需要共享的代码，以及一个描述软件包信息的文件 package.json （叫做 清单）。
安装 yarn
npm install -g yarn
yarn -v
# 更新 yarn 到最新版本
yarn set version latest
yarn 用法
yarn 镜像
# 查看
yarn config get registry
# 设置为淘宝镜像
yarn config set registry https://registry.npmmirror.com
# 设置为默认官方镜像
yarn config set registry https://registry.yarnpkg.com
pnpm 简单介绍
pnpm 中文文档
知乎
安装
# 安装
sudo npm install pnpm -g
# 查看镜像
pnpm config get registry
# 设置为淘宝镜像
pnpm config set registry https://registry.npmmirror.com/
# 更新升级
pnpm add -g pnpm
# 获取 pnpm安装位置
which pnpm
# 查找更多 pnpm
mdfind -n pnpm
使用
pnpm install 包 //
pnpm i 包
pnpm add 包 // -S 默认写入dependencies
pnpm add -D // -D devDependencies
pnpm add -g // 全局安装
移除
pnpm remove 包 //移除包
pnpm remove 包 --global //移除全局包
更新
pnpm up //更新所有依赖项
pnpm upgrade 包 //更新包
pnpm upgrade 包 --global //更新全局包
设置存储路径
pnpm config set store-dir /path/to/.pnpm-store
5月
03
4月
25
// 将 ip 转换成 city
function ip2City($ip)
{
$url = "https://apis.map.qq.com/ws/location/v1/ip?ip={$ip}&key=XXXXXXXX";
$res = curl($url, false, false, true);
$data = [];
try {
if ($res) {
$res = json_decode($res, true);
}
if ($res && $res['status'] == 0 && $res['result']) {
$data['latitude'] = $res['result']['location']['lat'];
$data['longitude'] = $res['result']['location']['lng'];
$data['city'] = $res['result']['ad_info']['city'] ? $res['result']['ad_info']['city'] : '未知';
$data['citycode'] = $res['result']['ad_info']['adcode'] && $res['result']['ad_info']['adcode'] > 0 ? $res['result']['ad_info']['adcode'] : 0;
}
} catch (Exception $e) {
}
return $data;
}
/**
* @param string $url 请求网址
* @param bool $params 请求参数
* @param bool $post 请求方式，是否是post
* @param bool $https 请求http协议，是否是https
* @return bool|mixed
*/
function curl($url, $params = false, $post = false, $https = false)
{
$httpInfo = array();
$ch = curl_init();
curl_setopt($ch, CURLOPT_HTTP_VERSION, CURL_HTTP_VERSION_1_1);
curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.118 Safari/537.36');
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 30);
curl_setopt($ch, CURLOPT_TIMEOUT, 30);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
if ($post === true) {
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $params);
curl_setopt($ch, CURLOPT_URL, $url);
} else {
if ($params === false) {
curl_setopt($ch, CURLOPT_URL, $url);
} else {
if (is_array($params)) {
$params = http_build_query($params);
}
curl_setopt($ch, CURLOPT_URL, $url . '?' . $params);
}
}
if ($https === true) {
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); // 对认证证书来源的检查
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false); // 从证书中检查SSL加密算法是否存在
}
$response = curl_exec($ch);
if ($response === false) {
Illuminate\Support\Facades\Log::error(sprintf('curl 错误。 url:%s, error:%s', $url, curl_error($ch)));
return false;
}
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
$httpInfo = array_merge($httpInfo, curl_getinfo($ch));
curl_close($ch);
return $response;
}
近期评论