Windows安装WSL开发react项目

简介

最近需要做一个react项目的开发，在window上面安装很多次，最后yarn start失败，于是查到wsl这个神器，安装后就可以愉快的开始react开发了~~~

安装wsl

1. 简介
   Windows Subsystem for Linux，可以在window实现linux操作
   优点
   安装简单 | 可以用window访问swl文件

2. List item

3. 允许window安装wsl

4. window store 选择 ubuntu
   

5. 关机重启

6. 双击ubuntu,添加用户名和密码

7. 由于当前未设置root密码，需要在命令行执行sudo passwd,设置root密码

8. 设定每次登录都是root用户

    ubuntu1804 config --default-user root
   

9. tips
   Windows 文件挂载在wsl了 /mnt
   linux可以使用ipconfig.exe
   命令行可以使用 bash -c “sudo apt-get update”

连接git

打开wsl，主要就是安装git,以及与github账号链接
(注意如果用的root用户生成key，那项目也放root底下；如果用的新添加的账号，那项目放在新添加的账号底下)

1. sudo apt-get install git
2. sudo git config --global user.name “xxx”
3. sudo git config --global user.email “xxx”
4. git config --list
5. ssh-keygen -t rsa -C “xxx@qq.com”
6. cat ~/.ssh/id_rsa.pub
7. 拷贝ssh码到http://github.com
8. github->setting->SSH and GPG keys->new SSH keys添加上就好了
9. 测试ssh git@github.com

配置react项目

1. 安装nvm

   wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash
   

2. 看版本

   nvm --version
   

3. 装node

   nvm install v12.12.0（项目需要12,根据你的需求安装版本，不清楚就按照最新版本）
   node -version
   

4. 搭建react

   npx create-react-app test-app
   cd test-app
   npm start
   

5. 访问localhost:3000

6. 使用github上面项目

   1. git clone xxx@xxx
   2. npm install yarn -g
   3. yarn install
   4. yarn start
   5. 访问上面项目
   

   

用vscode开发wsl项目

这个真的是太方便了

1. 安装插件
   
2. 连接WSL，点击左下角绿色处，选择wsl
   
   
3. 打开要开发的项目目录
   
4. 打开终端，直接可以执行命令
   

总结

这一套流程下来，你就可以在vscode里面开发wsl里面的react项目。
我是window配置react项目不成功，才选择的wsl。如果你本地可以直接跑起来，那根本无需用wsl，再或者你有linux的虚机，直接用linux+vscode也行，只要能用就好~~~