win11环境基于wsl2搭建前端开发环境

wsl2 安装及初始化

wsl2安装
wsl目录迁移
初始化编译环境(ubuntu20.04)

sudo apt update
sudo apt install g++ make python3 python2
#安装成功后，检查版本

node 环境初始化

nvm

nvm参考链接
官方链接

#手动安装
export NVM_DIR="$HOME/.nvm" && (
  git clone https://github.com/nvm-sh/nvm.git "$NVM_DIR"
  cd "$NVM_DIR"
  git checkout `git describe --abbrev=0 --tags --match "v[0-9]*" $(git rev-list --tags --max-count=1)`
) && \. "$NVM_DIR/nvm.sh"

#初始化 Now add these lines to your ~/.bashrc, ~/.profile, or ~/.zshrc file to have it automatically sourced upon login: (you may have to add to more than one of the above files)
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

node

nvm ls-remote
#Install the latest LTS version
nvm install --lts
#set default version
nvm alias default xxx
#use default
nvm use default

nvm 切换版本后，建议清空缓存

npm cache clean -f
yarn cache clean

nrm

npm install nrm -g
#ls
nrm ls
# set default registry
nrm use xxx
# check
cat ~/.npmrc
cat ~/.yarnrc

node-sass

前置依赖g++, make, python(2,3）

yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g
npm config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g

参考配置 .yarnrc

registry "https://registry.npm.taobao.org"
sass_binary_site "http://cdn.npm.taobao.org/dist/node-sass"

版本兼容

vscode

windows 安装， 使用wsl终端
https://code.visualstudio.com/docs/remote/wsl#_working-with-git

vue3 插件配置

Volar，Vue VSCode Snippets