部署基于 Vue 3 的终端模拟器：实现个性化主页导航

最新推荐文章于 2024-09-24 08:49:34 发布

起名字什么的最烦了111

最新推荐文章于 2024-09-24 08:49:34 发布

阅读量1k

点赞数 19

文章标签：前端 javascript

本文链接：https://blog.youkuaiyun.com/zhangyu_0221/article/details/141612044

版权

前言

前段时间我在互联网冲浪的时候发现了一个十分有趣的前端的项目，也就是终端模拟器，下意识我觉得可用又来做个性化主页导航，事实上原作者也是这么做的，得益于这位作者的开源，我们也可以部署一下，所以开始时先感谢一下这位作者。感谢开源。

github项目地址：项目地址
作者主页：作者主页

一、克隆一下项目

1.1 fork项目

首先要有一个GitHub账号，如果没有的话可以注册一下。
注册完成登陆后，点击项目地址打开，如果无法打开，可以上网搜索如何操作，本次不在说这些方面的事情。
进入项目后，点击stars后点击fork，就像这样

点击fork后
fork
repository name 这个地方填入shell-emulator.github.io,以方便我们用github pages部署网页。

之后点击create fork完成fork。
点击code
后复制链接用于clone到本地

1.2 clone到本地

接下来我们需要clone项目到本地方便修改，对本地的要求就是有一个git，如何配置git，网上关于这个的教程很多，可以参他们的教程。

接下来我们本地创建一个文件夹，打开powershell，cd到这个界面。

也可以直接在这个位置，输入powershell
输入以下命令进项clone

git clone 你的链接

类似这样就可以了。

git remote -v

可以通过这个命令测试一下，是否连接到远程仓库

二、个性化设置

整个个性化的过程中主要修改5个文件

2.1 项目本地运行启动

本地运行的条件是，有一个node.js的运行环境，如何配置安装node.js运行环境，请自己搜索一下吧，如果这里所太多文件就会太长。

打开powershell，cd到项目文件夹，运行以下命令

npm install
或
yarn install

等待依赖安装完成，出现如下界面代表安装完成。

安装完成后，运行以下命令启动服务。

npm run serve
或
yarn serve

出现以下界面之后，访问localhost:8080
在这里插入图片描述

2.2 配置个性化

打开进入项目目录，然后进入public目录修改config.js

username 这是用户名，修改这个参数后，一定要在username中添加用户目录
hostname 主机名
inittialContent 初始是显示的内容

大致预览会显示修改在这里面。

2.2 文件以及文件夹个性化配置

主要关系在这两个文件中，fsFile.js和fsTree.js中，其中fsFile.js是定制文件的地方，每一个文件都是一个函数，fsTree.js代表的是文件系统的树结构。

2.2.1 文件系统配置

打开fsTree.js,分布解析一下。
开始位置
这段代码代表的是从fsFile.js中导入一些方法，这些方法分别代表了一些文件。
nothing 代表了空文件，这个个人认为比较重要，一些时候可以直接使用。
json
整个文件的树状系统，实际是嵌套的json的内容，本次以home目录说一下吧，home这个key对应的value是一个json, json又嵌套了一个json。这结构成了树状结构，这段代码代表这么一个目录结构 /home/defaultuser/readme.txt

当然，这这里需要进行一个修改，将defaultuser修改为config.js中的username

他的树状结构比较简单，在来一个点的
在这里插入图片描述
看这段，就比较复杂了，但是一点点看还是可以看明白的，首先是grub目录下面有fonts、grub.cfg、i386-pc、locale、x86_64-efi这几个目录和以下文件比如说grubenv，目录下有嵌套一些文夹。区分目录与文件的区别是看他的value ，是{ }代表的是文件夹。

如果想在home添加以下user文件夹user文件夹下有一个web文件夹，web有一个page.img

那么就可以在home对应改成如下内容。

  "home": {
   
    "defaultuser": {
   
      "readme.txt": readme
    },
    "user":{
   
	"page.png":nothing
	}
  }

如果你实现了page.png对应的方法，那就将nothing替换方法就行。

2.2.2 文件配置

在这个模拟器中，对于文件的内容的读取可以使用cat命令

cd 文件目录
cat 文件名

如果我们在这个终端的执行这个命令

cat /home/你的用户名/readme.txt

就会得到以下内容
在这里插入图片描述

现在我们尝试对他进行修改一下。

首先，我们来看一下fsFile.js
在这里插入图片描述
可以看出这个readme方法，对应这home下的用户目录中的readme.txt文件，返回值为一个字符串，所以我们可以进行一些修改。

比如说我们想修改成以下的内容，

你好，这是我的主页
感谢你的点击
本网站作者是：123
基于github项目：shell-emulator 部署

我们内容进行这个方法修改成为这样的。

export function readme() {
   
  return [
    "你好，这是我的主页",
    "感谢你的点击",
    "本网站作者是：123",
    "",
    "基于github项目：<a href=\"https://github.com/ChrisKimZHT\" target=\"_blank\">shell-emulator</a> 部署",
    "",
  ].join

最低0.47元/天解锁文章