0. 基礎環境
類別：筆記本
硬件：Intel,Amd等x86_64處理器
系統：銀河麒麟操作系統 V10（SP1）2303-update2
關鍵詞：
信創,麒麟系統,linux,PKS,銀河麒麟,amd64,x86_64,x64,兆芯,海思,nodejs,nvm,vue,react
1.背景描述
現在的前端是前後端分離的，本文以node,npm等技術為特點，為研發人員搭建前端的開發提供參考。
2.安裝配置nvm(nodejs版本管理)
nvm allows you to quickly install and use different versions of node via the command line.
nvm用於快速切換node的版本,打開
https://github.com/nvm-sh/nvm#install--update-script
2.1. 安裝
打開命令行
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash #下載並安裝
或
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash #下載並安裝
設置變量
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
3.使用示例
nvm install v16
nvm use 16
#Now using node v16.9.1 (npm v7.21.1)
node -v
#v16.9.1
nvm use 14
#Now using node v14.18.0 (npm v6.14.15)
node -v
#v14.18.0
nvm install 12
#Now using node v12.22.6 (npm v6.14.5)
node -v
#v12.22.6
4.安裝yarn
npm install --global yarn --registry=https://registry.npmmirror.com #使用淘寶加速
yarn安裝確認
yarn -v5.安裝VSCODE
第三篇中有提到，請在應用市場中（也可以到官方網站下載https://code.visualstudio.com/download）安裝好VSCODE。
後面所有前端，GOLANG，PYTHON等都使用VSCODE進行項目開發搭建
也可以直接sudo gedit /etc/apt/sources.list.d/vscode.list，輸入如下內容：
deb [arch=amd64,arm64,armhf] http://packages.microsoft.com/repos/code stable main #本配置如果安裝好vscode後，會自動處理。再執行
sudo apt update -y #更新庫
sudo apt isntall vscode -y #安裝6.前端與後端接口聯調工具
6.1接口測試工具APIPost
與後端接口聯調的工具有很多，如POSTMAN等，但都需要基於瀏覽器。這裏面推薦一個新的離線桌面工具APIPOST，支持麒麟和飛騰平台。
下載導航頁：https://www.apipost.cn/download.html
下載地址：https://dlcdn.apipost.cn/dl/7.2.6/apipost_linux_x64_7.2.6.deb...
啓動後效果
6.2接口測試工具Apifox
https://www.apifox.cn/ 這裏要下載amd64,或x86,x86_64,x64標識的deb包。
下載成功，安裝啓動後
7.electron官方工具
7.1 Electron官方fiddle
Electron官方團隊為開發者提供了一個更快捷的創建項目並進行試驗的工具
每次開發一個前端應用，都要下載 Electron，等待的時間與快速響應需求，需要開發者更多的耐心。
我非常希望能快一些，相信許多開發人員也是如此，希望 Electron 團隊開發了一個新工具，可以幫助我們在 Electron 中進行實時測試，讓開發者的生活更輕鬆些。可以幫助我們快速創建和啓動 Electron 的工具。它提供一個模板，能夠快速啓動，你只需要更改一部分內容，選擇一部分要運行的代碼段，可以在 Electron Project 中查看結果。另外，Electron Fiddle 還可以把這段代碼保存為 Github Gist 中，也可以保存在你的本地文件夾中。
https://www.electronjs.org/fiddle
下載地址：https://objects.githubusercontent.com/github-production-relea...
啓動效果：
麒麟操作系統，從入門到精通
麒麟操作系統專欄:https://segmentfault.com/blog/kylinos
麒麟操作系統x64專欄:https://segmentfault.com/blog/kylinos-x64
個人主頁：
https://segmentfault.com/u/code4world/articles
https://twitter.com/xiaohelong
https://github.com/xiaohelong
聯繫郵箱：1179611323@qq.com
羣：662512340
發行日志：
20240410
