写点什么

以搭建 Vuepress 文档为例,展示用 VSCode 来远程开发

作者:为自己带盐
  • 2022 年 1 月 10 日
  • 本文字数:1977 字

    阅读完需:约 6 分钟

以搭建Vuepress文档为例,展示用VSCode来远程开发

背景

现在的开发模式,应该是有相当一部分的开发同学,是在 Windows 环境下做开发,然后生产和测试环境在 Linux 的某一发行版上。

我们在本地开发好后,将文件部署到 Linux 环境后,有时候需要临时调整一些内容,而在本地开发在上传可能效率会比较低下,而直接在 Linux 终端里用 vi/vim 有时候也会遇到一些效率问题(尽管 vim 真的很好用,但做代码调整的时候,还是不如编辑器来的直接)

所以,远程开发就有了实际的使用需求。

我这里以编写 Vuepress 框架的文档为例,介绍一下开发端为 Windows,服务端为 WSL(2)和 CentOS 两种环境的远程开发模式。


搭建 vuepress 依赖环境

这个环节,其实可以省掉的,因为官方文档给出的步骤已经相当完善了,但真不是咱像炫耀或者怎么着,是真的有一些同学不太熟悉这块,尤其是还没从 Jquery 框架转过来的同学。所以我还是想用我的方式来介绍一下。

底层环境--NodeJs

在安装 vuepress 之前,先把 node 装上。

安装 node 有 3 种普遍的方式,

  • 1 是下载官方编译好的版本,然后设置好环境变量;

  • 2 是直接下载源码在本地编译

  • 3 是直接通过 rpm 包来安装,但这种需要提前修改包源,不如可能安装的版本过于古老,像 CentOS7 的默认 node 的 rpm 包是 6.x,npm 是 3.x

ps.因为我对这部分不太熟悉,所以这里踩了坑。最开始我是用的官方编译好的版本,然后通过设置软连接来配置的 node 环境,结果后边用 yarn 的时候一直报 require nodejs 的错。后来用了编译源码的方式,流程是比较顺利,但是编译的过程时间太长了,等的不耐烦我就直接中断了。最后还是采用的第一种方式,但不用设置软链接,而是直接配置环境变量就可以了。

我这里建议不想折腾的同学直接下载编译好的版本,另外,我个人还建议开发环境(像 redis,es,docker 等)尽可能都按照下载压缩包的方式来安装,因为安装流程是统一的,如果换了 Linux 的发行版,安装方式都是一样的。

好了,说了半天,来安装Node

前面唠叨了那么多,最后就是建议选这个方式来安装

a. 下载编译好的版本

# 下载wget https://nodejs.org/dist/v16.13.1/node-v16.13.1-linux-x64.tar.xz# 解压tar xf node-v16.13.1-linux-x64.tar.xz# 重命名一下(也可以不用)mv node-v16.13.1-linux-x64 node16# 设置环境变量export NODE_HOME=/usr/local/src/node16export PATH=$NODE_HOME/bin:$PATH# 保存配置文件source /etc/profile
复制代码

完成上面的步骤后,就可以在控制台查看 node 和 npm 版本了


b. 设置软连接的方式我也放在这里,但我遇到的情况是安装 yarn 的时候依旧会提示依赖 nodejs

# 下载,解压和上面的方式一致...# 设置软连接ln -s /usr/local/nodejs/bin/npm /usr/local/bin/ln -s /usr/local/nodejs/bin/node /usr/local/bin/
复制代码

如此设定好后,仍然可以打印 node 和 npm 版本


次底层环境--Yarn

配置好 node 之后,使用 npm 安装 yarn

npm install yarn -g
复制代码

安装好后,可以打印 yarn 版本

初始化 Vuepress

完成了开发环境的配置,初始化就很简单了,

# 选择一个目录mkdir /home/tony/myvuepress & cd /home/tony/myvuepress# 初始化开发环境yarn init# 创建vuepress环境yarn add -D vuepress# 创建第一篇文档(这就跟官方的教程一样了)mkdir docs && echo '# Hello VuePress' > docs/README.md# 在 package.json 中添加一些 scripts{  "scripts": {    "docs:dev": "vuepress dev docs",    "docs:build": "vuepress build docs"  }}# 开发环境下运行yarn docs:dev
复制代码

执行 docs:dev 后的效果如下



好了,vuepress 的基础开发环境就配置完成了。

远程开发——Windows&CentOS

vscode 安装 remote-ssh 插件

这个也有官方的介绍文档:https://code.visualstudio.com/docs/remote/remote-overview

大体流程是

  1. 在 vscode 的扩展市场,搜索 remote-ssh 插件安装


  1. 配置 ssh

按住快捷键 Ctrl+Shift+P,选择”Remote-SSH“选项


输入 ssh 链接命令,”ssh tony@10.185.1.176“

然后根据提示,选择系统版本,我这里选择”Linux“,键入密码,保存配置文件就可以了。


  1. 打开远程路径.

点击【文件】->【打开文件夹】选择要编辑的路径,然后按照提示输入密码就可以在工作区看到目标路径的结构了。

至此,在本地远程开发的配置就完成了

以后再新增文档的时候,就可以直接使用 vscode 打开远程路径进行文档的新增和编辑了。

远程开发——Windows&WSL

我个人感觉,对于开发环境是 Windows 的同学来说,跨平台开发的最佳实践,就是 Windows+wsl 的组合了。借助 vscode 的”Remote-WSL“插件,可以非常方便的进行

只需再 vscode 里安装”Remote-WSL“插件,然后打开本地的 WSL 窗口

进入到目标目录后,直接输入

code .
复制代码

vscode 就会帮自动打开当前目录


之后就可以快乐的进行开发了,wsl 等于是一个天然的开发/测试环境,节省了大量的环境搭建环节,提高开发效率。

好了,回到 Vuepress,不论是再本地,还是再远程环境,编写玩文档之后,执行构建命令

yarn docs:build
复制代码

之后,会再.vuepress 目录下生成 dist 目录,该目录就可以直接进行部署了。

差不多就这些。

发布于: 刚刚阅读数: 2
用户头像

学着码代码,学着码人生。 2019.04.11 加入

狂奔的小码农

评论

发布
暂无评论
以搭建Vuepress文档为例,展示用VSCode来远程开发