花兩周的時(shí)間用vue3做了一個(gè)簡(jiǎn)易的代碼編輯器

“ ?

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

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

歡迎大家關(guān)注?微信、知乎

”

項(xiàng)目源代碼：

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

使用的技術(shù)

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

效果圖

整個(gè)界面結(jié)構(gòu)由四部分構(gòu)成，

1、頂部的菜單欄

2、左側(cè)文件樹(shù)

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

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

目前已完成的功能包括

一、菜單欄 ?（通過(guò)渲染進(jìn)程與主進(jìn)程的ipc通信完成）

1、打開(kāi)文件

2、打開(kāi)文件夾

3、保存

4、通過(guò)快捷鍵ctrl+s 保存

5、最大化窗口

6、最小化窗口

7、關(guān)閉窗口

8、還原窗口

二、左側(cè)文件樹(shù) （通過(guò)node.js ?fs模塊與path模塊完成）

1、展開(kāi)文件樹(shù)

2、打開(kāi)文件

3、拖拽文件

4、刷新文件樹(shù)

5、剪裁文件

6、剪裁文件夾

7、復(fù)制文件

8、復(fù)制文件夾

9、粘貼

10、新建文件

11、新建文件夾

12、刪除文件

13、刪除文件夾

14、復(fù)制路徑

15、重命名

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

1、切換

2、編輯

3、關(guān)閉

4、保存

5、復(fù)制路徑

6、關(guān)閉已保存

7、關(guān)閉其他

8、關(guān)閉全部

四、右側(cè)下方命令行終端（通過(guò)node.js child_process spawn完成）

1、根據(jù)系統(tǒng)與內(nèi)置終端通信

2、處理成功

3、處理失敗

4、根據(jù)左側(cè)樹(shù)切換運(yùn)行目錄

后續(xù)

1、增加主題

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

3、命令行終端增加 終止當(dāng)前操作功能

4、增加git 工具功能

5、美化界面等

掃碼關(guān)注微信公眾號(hào)