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

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 -v

5.安装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
联系邮箱：[e-mail]
群：662512340
发行日志：
20240410