花兩周的時間用vue3做了一個簡易的代碼編輯器

“ ?

致力于技術講解，其中包括但不局限于技術實戰(zhàn)、技術理論、技術個人理解、學習心得，還有一切值得被發(fā)現的技術內容。希望小伙伴們，批評、指教。

同步知乎主頁：https://www.zhihu.com/people/wan-qiu-lan-chao

歡迎大家關注?微信、知乎

”

項目源代碼：

https://github.com/Lateautumn00/zhzy-tveep-codeEditor.git

使用的技術

electron v18? ? https://www.electronjs.org/

vue3? ? https://v3.cn.vuejs.org/

element-plus?? https://element-plus.gitee.io/zh-CN

node.js v16.13.1 ? http://nodejs.cn/api/

typescript

scss

效果圖

整個界面結構由四部分構成，

1、頂部的菜單欄

2、左側文件樹

3、右側上方的代碼區(qū)

4、右側下方的命令行終端區(qū)域

目前已完成的功能包括

一、菜單欄 ?（通過渲染進程與主進程的ipc通信完成）

1、打開文件

2、打開文件夾

3、保存

4、通過快捷鍵ctrl+s 保存

5、最大化窗口

6、最小化窗口

7、關閉窗口

8、還原窗口

二、左側文件樹 （通過node.js ?fs模塊與path模塊完成）

1、展開文件樹

2、打開文件

3、拖拽文件

4、刷新文件樹

5、剪裁文件

6、剪裁文件夾

7、復制文件

8、復制文件夾

9、粘貼

10、新建文件

11、新建文件夾

12、刪除文件

13、刪除文件夾

14、復制路徑

15、重命名

三、右側上方代碼區(qū)（通過ipc通信、node.js fs模塊、path模塊完成）

1、切換

2、編輯

3、關閉

4、保存

5、復制路徑

6、關閉已保存

7、關閉其他

8、關閉全部

四、右側下方命令行終端（通過node.js child_process spawn完成）

1、根據系統(tǒng)與內置終端通信

2、處理成功

3、處理失敗

4、根據左側樹切換運行目錄

后續(xù)

1、增加主題

2、菜單增加編輯 單元操作

3、命令行終端增加 終止當前操作功能

4、增加git 工具功能

5、美化界面等

掃碼關注微信公眾號