基于官网Vue3开发环境配置总结

开发环境：

windows + vscode远程开发 + ubuntu23.10

1、先安装nodejs

apt install nodejs npm

2、查看并配置国内仓库镜像地址

# 查看默认配置
npm config get registry
# 修改为淘宝镜像地址（新）
npm config set registry https://registry.npmmirror.com

3、创建新的项目模板

npm create vue@latest

这是交互式配置，对于新手体验，我就按照官网推荐的，全部都是执行默认的No选项。

理论上讲，对于项目模板来讲，这些选项就是在项目的配置文件中绑定一些开发常用的插件，是绑定不是安装。 

对于我这样的，对于前端开发体系不太熟悉的人，顺带梳理下这方面的逻辑也是好的。因此，特地在GPT上提问：如何理解这条命令？得到的回答大致是这样的：

前面的npm create属于npm命令的范畴，vue环境只是npm环境的一部分，甚至可以理解为vue是npm软件仓库中的一个软件包，这有点类似于ubuntu的apt命令安装时的逻辑。再往后，vue@latest指代这个软件包的名称是vue，版本是当前可用的最新版本。

关于这一点，回想起之前的教育培训或看网课录像的经历，特别有感触。老师只会教条式的把命令行仍给你，如果后期模块之间发生版本偏差所引起的兼容性问题，就很难受。

4、安装依赖插件

前面提到，在新建项目模板时有一些交互式命令用于绑定一些常用开发插件，如果你选择了一些，现在就是正式从远程仓库将它们下载到本地的时候了。

npm install

实际情况中，我并没有选择推荐的插件，所以这一步几乎没花什么时间。

理论上讲，到目前为止，一个完整可用的空项目模板就已经初始化完成了。

5、启动项目

npm run dev

 项目正常启动了，因为我的环境是远程开发，理论上现在你只能在ubuntu虚拟机内部访问它。

补充：在vue2的脚手架中，会直接暴露远程服务器相应的外网服务地址，而在vue3中，默认情况下需要借助IDE的端口转发功能来实现。

vscode检测到是远程开发环境，就顺带帮你把ubuntu的本地环回地址转发到window宿主机的本地环回地址的同一端口中，所以你现在可以直接在windows的浏览器访问localhost:5173。

只是，从原理上需要理清的是，这个访问通路并不完全是vue提供是，明确这一点对后续可能发生的开发环境问题很重要。

6、vsocode端口转发功能的使用评价

vscode远程登录到ubuntu系统后，会自动触发这个端口转发，
即windows主机的本地环回的5173端口，已经转发到远程服务器的本地环回5173端口。
这好像有点不太直观，
比如，我的远程ubuntu系统在vmware的net网卡地址是192.168.49.134，
如果让我试着配置端口转发，我的逻辑是192.168.49.134:5173 => localhost:5173
左右两边的地址映射，都是以远程服务器为描述对象的，口语表达类似于：
由于vue脚手架启动服务时限制在本地环回，需要通过vscode的端口转发功能，将其
本地环回的端口访问路由转发到它的net虚拟网卡即192.168.49.134
开发过程中，通常是在windows宿主机的浏览器中访问远程服务器中的vue服务，
而在windows宿主机中是可以直接访问net虚拟网卡的。

我觉得vscode的这个端口转发功能，将一些转发或者叫映射细节给隐藏起来了，对于初次使用者来讲，直观上确实不太好理解。