麒麟操作系统 (kylinos) 从入门到精通 - 研发环境 - 第十一篇 Web前端开发及环境准备

0.基础环境

类别：笔记本
型号：中国长城 NF14C
硬件平台：飞腾处理器（ArmV8 指令集）
系统：银河麒麟操作系统 V10（SP1）

关键词：
信创,麒麟系统,linux,PKS,银河麒麟,飞腾,arm64,arm,nodejs,nvm,前端开发

1.背景描述

现在的前端是前后端分离的，本文以node,npm等技术为特点，为研发人员搭建前端的开发提供参考。

2.下载nodejs

2.1直接使用最新版二进制

在nodejs下载node arm64(aarch)压缩包（我选的是16 lts)
https://nodejs.org/zh-cn/download/
https://nodejs.org/dist/v16.15.0/node-v16.15.0-linux-arm64.ta...

2.2 使用仓库版本（可能部分应用会显示版本低,不推荐）

sudo apt-get install nodejs npm

3.解压并配置(官方二进制需要此项)

将文件解压到特定位置，我本人为省事直接放在个人主目录下，方便权限处理。注：使用二进制包是因为apt的包太旧不能工作,以jeecg-boot为例

3.1配置PATH变量

#编辑/etc/profile
sudo vi /etc/profile
#添加下面这一行
export PATH="$PATH:/home/long/node-v16.15.0-linux-arm64/bin" 

按esc退出编辑，输入:wq 回车保存退出,使变量立即生效

sudo -s source /etc/profile

或打开终端，单独执行一次

export PATH="$PATH:/home/long/node-v16.15.0-linux-arm64/bin" 

4.安装yarn

npm install --global yarn --registry=https://registry.npm.taobao.org #使用淘宝加速

yarn安装确认

yarn -v

5.安装VSCODE

第三篇中有提到，请在应用市场中（也可以到官方网站下载）安装好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.安装配置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

6.1 使用示例

$ 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

6.2 安装

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

7.前端与后端接口联调工具

7.1接口测试工具APIPost

与后端接口联调的工具有很多，如POSTMAN等，但都需要基于浏览器。这里面推荐一个新的离线桌面工具APIPOST，支持麒麟和飞腾平台。

下载导航页：https://www.apipost.cn/download.html
下载地址：https://www.apipost.cn/dl.php?client=Linux&arch=arm64&version...

启动后效果

7.2接口测试工具Apifox

https://www.apifox.cn/


下载成功，安装启动后

8.electron官方工具

8.1 Electron官方fiddle

Electron官方团队为开发者提供了一个更快捷的创建项目并进行试验的工具
每次开发一个前端应用，都要下载 Electron，等待的时间与快速响应需求，需要开发者更多的耐心。

我非常希望能快一些，相信许多开发人员也是如此，希望 Electron 团队开发了一个新工具，可以帮助我们在 Electron 中进行实时测试，让开发者的生活更轻松些。可以帮助我们快速创建和启动 Electron 的工具。它提供一个模板，能够快速启动，你只需要更改一部分内容，选择一部分要运行的代码段，可以在 Electron Project 中查看结果。另外，Electron Fiddle 还可以把这段代码保存为 Github Gist 中，也可以保存在你的本地文件夹中。

https://www.electronjs.org/fiddle

下载地址：https://github.com/electron/fiddle/releases/download/v0.31.0/electron-fiddle_0.31.0_arm64.deb
启动效果：

麒麟系统专栏：
https://segmentfault.com/blog/kylinos
文章发表在SegmentFault
联系邮箱：[e-mail]
群：662512340
发行日志：
20220613 首发
20220929 增加node版本管理工具nvm
20221027 增加接口测试工具apipost
20221209 增加接口测试工具apifox
20221209 增加electronjs fiddle官方验证工具
20230416 增加vscode仓库配置