什么是WSL

适用于 Linux 的 Windows 子系统 (WSL)，允许开发人员直接在 Windows 上运行 GNU/Linux 系统，（包括大多数命令行工具、实用程序和应用程序），无需修改，无需传统虚拟机或双引导设置的开销。

官方文档：WSL

安装

必要条件

Windows 10 版本 2004 及更高版本（内部版本 19041 及更高版本）或 Windows 11

下载并安装子系统

wsl --install

在 Microsoft Store 搜索 WSL，选择一个 Ubuntu 并安装，然后重新在命令行执行 wsl --install

安装完成后，命令行会提示需要设置 用户名 和 密码， 完成后会进入 Ubuntu 命令行

windows 下访问 wsl ，在资源管理器中输入 \wsl$

Linux 文件系统根目录：\wsl$<DistroName>\home<UserName>\Project
Windows 文件系统根目录 C:\Users<UserName>\Project或/mnt/c/Users/<UserName>/Project$

建议：windows 的命令行工具，推荐 Windows Terminal，可以在 Microsoft Store 下载

配置开发环境

编辑器 VS Code

windows的 VS Code 安装插件 Remote - WSL

此插件可以在 VS Code 中直接打开 WSL 中的文件，实现windows的UI ，Ubuntu 的内核

打开 WSL 后，编辑器插件的同步

打开 REMOTE - WSL 失败的问题

echo -en '\x10' | sudo dd of=/usr/bin/gzip count=1 bs=1 conv=notrunc seek=$((0x189))

# 参考 https://github.com/microsoft/WSL/issues/4461

安装 oh-my-zsh

# curl
sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

# or

# wget
sh -c "$(wget https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh -O -)"

安装 nvm 或者 n , 安装 NodeJs

curl -L https://raw.githubusercontent.com/tj/n/master/bin/n -o n
bash n lts
# Now node and npm are available
npm install -g n

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
# or
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

安装 @vue/cli 并创建一个默认项目

在 /home/$USER/ 下创建自己的文件夹，创建一个测试项目

cd /home/$USER/
mkdir project && cd project
vue create test-demo
cd test-demo
npm run serve

修改文件没有权限的问题

$ ll
0 drwxr-xr-x 1 root root   512 Aug 30 15:54 project

查看新建的文件夹，发现权限是 root，这样很不友好，修改为用户级别的就可以

sudo chown -R $USER project

windows 的UI，Ubuntu 的内核，WSL 打造前端开发环境