VsCode 远程 WSL 开发 Antdv

WSL 安装和权限配置

在 Windows 应用商店搜索 Ubuntu 或其他 Linux 系统，点击安装：

打开 Ubuntu，安装完成后输入用户名、密码：

执行 sudo apt update 和 sudo apt upgrade 命令更新包：

安装 vim，以方便编辑文件：

sudo apt install vim

编辑 /etc/sudoers 文件，给当前用户赋予 root 权限

sudo vim /etc/sudoers

配置镜像源

因 Ubuntu 默认使用的外网镜像源，所以更新下载包速度慢，配置中国区镜像源可以解决

deb http://mirrors.aliyun.com/ubuntu/ bionic main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ bionic-security main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ bionic-updates main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ bionic-proposed main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ bionic-backports main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ bionic main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ bionic-security main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ bionic-updates main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ bionic-proposed main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ bionic-backports main restricted universe multiverse

软件安装

安装 JDK-8

sudo apt install openjdk-8-jdk

安装 Maven

sudo apt install maven

配置 Maven 中国区镜像源

sudo vim /etc/maven/settings.xml

<mirror>
  <id>huaweicloud</id>
  <mirrorOf>*</mirrorOf>
  <url>https://mirrors.huaweicloud.com/repository/maven/</url>
</mirror>

<mirror>
  <id>mirrorId</id>
  <mirrorOf>central</mirrorOf>
  <name>Human Readable Name for this Mirror.</name>
  <url>http://central.maven.org/maven2/</url>
</mirror>

<mirror>
  <id>nexus-aliyun</id>
  <mirrorOf>*</mirrorOf>
  <name>Nexus aliyun</name>
  <url>http://maven.aliyun.com/nexus/content/groups/public</url>
</mirror>

安装 Node.JS

 sudo apt install nodejs

注：安装的 Node.JS 非最新版本，需重新安装最新版本

curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
sudo apt-get install -y nodejs

使用 npm 安装 cnpm

sudo npm install -g cnpm

使用 cnpm 安装 vue-cli

sudo cnpm install -g vue-cli

Visual Studio Code 配置

在 Visual Studio Code 中安装Remote - WSL插件，连接到 WSL

在打开的Remote - WSL Visual Studio Code 中安装 Java Extension Pack、Spring Boot Extension Pack、Lombok Annotations Support for VS Code 和 Vetur 插件

运行后端项目

在 Visual Studio Code 中打开jeecg-boot文件夹，再打开JeecgApplication.java文件并运行

运行前端项目

在 Visual Studio Code 中打开ant-design-vue-jeecg文件夹，再打开一个终端，运行前端项目

sudo npm run serve

浏览界面

在浏览器中输入后端地址，查看接口文档

在浏览器中输入前端地址，进入登录界面

输入用户名、密码和验证码后进入主页