Vue3 使用选项式 API 较容易，按文档上手就行，这里就不多说。组合式 API 上手会比较麻烦一点。

创建实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// app.js
import { createApp } from 'vue';
import { createI18n } from 'vue-i18n';
import App from './App.vue';

const i18n = createI18n({
  locale: 'cn', // 设置当前语言
  legacy: false, // 要支持组合式API，此项必须设置为false;
  // globalInjection: true, // 全局vue视图中注册$t方法，vue-i18n v9.2 之后默认是 true
  messages: {
    cn: {
      message: {
        hello: '你好',
      },
    },
    en: {
      message: {
        hello: 'hello',
      },
    },
  },
});

const app = createApp(App);
app.use(i18n);
app.mount('#app')

基本使用

1
2
3
4
5
6
7
8
9
10

<!-- App.vue -->
<script setup>
import { useI18n } from 'vue-i18n';
const { t } = useI18n(); // 组合式 API 使用 vue-i18n，关键是 createI18n 的 legacy 参数要设置成 false
console.log(t('message.hello'));
</script>

<template>
  <div>在视图中使用语言： {{ $t('message.hello') }}</div>
</template>

自定义全局方法使用 vue-i18n

组合式 API 每次要 import 又要导出要用的函数，需要频繁使用，这样太麻烦了。
我们可以定义 window.$t 全局函数，这样在 setup 中也能直接用 $t()取得语言信息。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// app.js
import { createApp } from 'vue';
import { createI18n } from 'vue-i18n';
import App from './App.vue';

const i18n = createI18n({
  locale: 'cn',
  messages: {
    cn: {
      hello: '你好',
    },
    en: {
        hello: 'hello',
    },
  },
});

window.$t = function() {
  return i18n.global.t(...arguments);
}

const app = createApp(App);
app.use(i18n);
app.mount('#app')

备注

更多用法见官方文档： https://vue-i18n.intlify.dev/guide/

全局设置代理

1
2

git config --global http.proxy 'socks5://127.0.0.1:1080'
git config --global https.proxy 'socks5://127.0.0.1:1080'

取消全局代理

1
2

git config --global --unset http.proxy
git config --global --unset https.proxy

指定域名使用代理

1
2
3
4
5

#只对github.com
git config --global http.https://github.com.proxy socks5://127.0.0.1:1080

#取消代理
git config --global --unset http.https://github.com.proxy

在 .git/config 配置文件中设置代理

在 .git/config 文件中添加配置：

1
2

[https]
	proxy = socks5://127.0.0.1:1080

ssh 代理连接（使用 ssh 访问 git 的解决方案）

前面设置的都是 https 代理， GitHub 都要求通过 ssh key 来提交，我们可以在 ~/.ssh/config 配置文件中设置使用代理连接 ssh。

1
2
3
4
5
6
7
8
9
10

Host github.com
HostName github.com
User git
IdentityFile C:\Users\cmpan\.ssh\github
ProxyCommand "C:\Program Files\Git\mingw64\bin\connect" -S 127.0.0.1:1080 -a none %h %p
``````

```sh
# MacOS
ProxyCommand nc -v -x 127.0.0.1:1080 %h %p

终极方案

如果你有一台外网的 Linux 服务器，你可以用该服务器作为代理。

1
2
3
4
5
6
7
8
9
10
11
12
13

# 作为代理的ssh连接参数
Host          pxy
HostName      IP地址 
Port          22
User          pxy
IdentityFile  ~/.ssh/pxy

# GitHub 连接参数
Host          github.com
HostName      github.com
User          git
IdentityFile  ~/.ssh/github_auth
ProxyCommand  ssh pxy -W %h:%p # pxy 为代理ssh连接对应的 Host，在 Linux/Mac/Windows 上通用

常用命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 查看已安装发行版
wsl -l -v

# 设置默认发行版
wsl --set-default <Distribution Name>

# 启动默认发行版
wsl

# 启动指定发行版
wsl -d <Distribution Name>

# 指定登录用户启动 wsl
wsl -u <User Name>

# 更改发行版的默认用户
<DistributionName> config --default-user <Username>

# 关闭 wsl 的运行
wsl --shutdown

# 关闭指定发行版
wsl --terminate <Distribution Name>

更多命令见 WSL 官网

查看宿主机ip地址

宿主机 ip 在子系统的 /etc/resolv.conf 文件中的 nameserver 设置。

vhdx文件

vhdx文件是虚拟机的虚拟磁盘文件，随着使用时间变长，vhdx 内会产生冗余文件，可以使用 diskpart 工具进行压缩。

操作步骤

1、关掉使用vhdx文件的进程。
cmd 命令：

1

wsl --shutdown

2、命令行启动 diskpart 工具，cmd命令：

1

diskpart

3、选择vhdx文件

cmd 命令：

1

select vdisk file = "D:\WSL\Debian-12-ext4.vhdx"

4、执行压缩命令：

cmd 命令：

1

compact vdisk

等待压缩进度到100即可。

参考：

https://learn.microsoft.com/zh-cn/windows/wsl/disk-space

基本配置

1
2
3
4
5
6
7
8
9
10
11
12
13

# 更新
sudo apt update
sudo apt upgrade
# 添加新用户
sudo adduser 用户名 -g users
# 给用户添加 sudo 权限
sudo usermod -aG sudo 用户名
# 配置 ssh key 登录
sudo mkdir -p /home/用户名/.ssh
vim /home/用户名/.ssh/authorized_keys
# 贴入 ssh 公钥
chown -R 用户名:users /home/用户名

设置自定义命令

在 /etc/profile 文件添加一下配置

1
2
3
4
5

alias l="ls -lhF --color"
alias ll="ls -lAhF --color"
alias la="ls -A --color"
alias clean="history -c; history -w"
alias ws="cd ~/workspace"

source /etc/profile

ssh 登录设置

1
2
3

sudo vim /etc/ssh/sshd_config
PasswordAuthentication no # 禁用密码登录
PermitRootLogin no # 禁止root用户登录，可通过user0登录后切换到root

安装应用包

1

sudo apt install git

ssh-agent 可以保存 ssh 秘钥的口令，让我们用 ssh 秘钥登录时，不需要输入秘钥的口令。

Windows 安装 git 后， 其带的 OpenSSH 被安装到 C:\Windows\System32\OpenSSH 文件夹，但是 ssh-agent 服务没有启动。

打开管理员权限的 Power Shell，输入命令：

1
2
3
4

# 把 `ssh-agent` 添加为开机自启动的系统服务
Set-Service ssh-agent -StartupType Automatic
# 启动 ssh-agent 服务
Start-Service ssh-agent

这样我们就把 ssh-agent 添加为开机自启动的系统服务了。

1
2
3
4
5

# 把私钥加入 ssh-agent
ssh-add .ssh\id_rsa

# 查看已加入 ssh-agent 的私钥
ssh-add -l

1、安装认证器

在 Microsoft Store 搜索 OTPKEY Authenticator 并安装。

如果你用 iPhone，可以用 Microsoft Authenticator APP，安卓的很多 APP 要通过谷歌应用商店安装，国内太麻烦，不如直接用 Windows 的方便。

2、打开设置 2fa 二维码

电脑浏览器登录GitHub账号 -> “Settings” -> “Password and authentication” -> “Enable two-factor authentication” -> “Set up using an app” -> “Continue”，看到一个二维码。

3、设置 OTPKEY Authenticator

Windows 打开 OTPKEY Authenticator 程序，点击右上角的加号，然后再点右上角的二维码形状图标，把弹出窗口拖到上一步的二维码上，将自动填入到 Secret 输入框，再把前面两个输入框填完后点“ADD”，你将看到一串6位的数字。

把6位数字输入到 “Verify the code from the app” 输入框 -> “Download”，保存恢复代码 -> “I have saved my recovery codes” -> “Done”，设置完成。

4、2FA 登录

用账号密码登录 GitHub 后，Windows 打开 OTPKEY Authenticator 程序，看到6位数字，在浏览器输入该6位数字即可登录成功。

如果 OTPKEY Authenticator 打不开或不能生成验证码，可用前面下载的恢复吗登录。

1. 生成key

1
2

ssh-keygen -t ed25519 -f ~/.git/github_auth -C '备注，可用邮箱'

2. 添加秘钥到 ssh-agent

如果自定义了秘钥文件名，就需要把秘钥添加到 ssh-agent 中。

1
2
3

ssh-add ~/.ssh/github_auth
# 如果秘钥有口令，则加上 -K 参数，输入口令后，就不用每次连接都要输入 key 口令
ssh-add -K ~/.ssh/github_auth

这一步也可以通过 ssh config 文件来显式设置域名用指定的秘钥

1
2
3
4
5
6
7

vim ~/.ssh/config

# 加入下面的内容

Host github.com # ssh 主机名
HostName github.com # 连接域名或IP
IdentityFile ~/.ssh/github_auth # 私钥路径

3. 添加秘钥到 GitHub 账户

个人中心 Settings -> SSH and GPG keys -> New SSH Key

把 ~/.ssh/github_auth.pub 内容粘贴到 Key 输入框。

4. 验证

用一下命令验证是否配置成功。

1

ssh -T git@github.com

注：

安装好 git 后，需要先设置全局用户名和邮箱才能使用。

1
2
3

git config --list
git config --global user.name "Your Name"
git config --global user.email "youremail@yourdomain.com"

1、创建项目

在 WSL 中用 npm 创建 vue 项目。

（不用 pnpm 是因为：用 WSL 的 pnpm 安装 node 包后，Windows 下的 PhpStorm 2023.2.1 识别不出，希望官方能早点解决。）

1
2
3

npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm i

2、打开项目

用 PhpStorm/WebStorm 打开 WSL 项目。

3、配置 Node.js 和 npm

打开 Node.js 和 npm 配置，解释器选择 WSL 上的 Debian /usr/bin/node，包管理器选择 WSL 上的 npm。

4、运行开发环境

打开 PhpStorm 的终端窗口，终端自动进入 WSL 上的项目文件夹，输入 npm run dev 启动开发服务器，支持热加载。用浏览器打开 http://localhost:5173/ 浏览页面，编辑 src/components/HelloWorld.vue 文件，不需要刷新就能看到页面热更新。

Chrome 不能单独设置代理而是用系统代理，据说 Windows 系统设置的代理是 socks4 代理，开系统代理后，用 Chrome 打不开 Google，Chrome 登录不了 Google 账号。

开系统设置代理后，虽然打不开 gooogle.com，但是可以打开这个 chrome 应用商店：

1

https://chrome.google.com/webstore/category/extensions

这样我们就可以先安装 Chrome 代理插件，再在 Chrome 彩礼插件中设置 socks 5 代理。

我装了 FoxyProxy Standard 代理，可行。

如果只需要上网，可以用 Firefox，它有设置代理的地方。
如果只是为了使用 Chrome 扩展，可以用 Edge，Edge 使用和 Chrome 一样的内核，可以从 Chrome 官网安装插件，也可以从 Edge 官网安装插件。