当前位置: 首页 > Linux

麒麟操作系统(kylinos)从入门到精通-研发环境-第11章Web前端开发与环境准备

时间:2023-04-06 22:52:50 Linux

0.基础环境类:笔记本型号:中华长城NF14C硬件平台:飞腾处理器(ArmV8指令集)系统:银河麒麟操作系统V10(SP1)关键词:芯创,麒麟系统,linux,PKS,银河麒麟,飞腾,arm64,arm,nodejs,nvm,前端开发1.背景描述目前front-end与front-end分离,本文以node和npm等技术为特色,为开发者搭建前端开发提供参考。2、下载nodejs2.1,直接使用最新版本的binary在nodejs中下载nodearm64(aarch)压缩包(我选择的是16lts)https://nodejs.org/zh-cn/down...https://nodejs.org/dist/v16.1...2.2使用仓库版本(部分应用可能会显示低版本,不推荐)sudoapt-getinstallnodejsnpm3。解压配置(官方binary需要这个)将文件解压到特定的Location,我为了省事直接放在个人home目录下,方便权限处理。注意:使用二进制包是因为apt包太老了,不能用。以jeecg-boot为例3.1配置PATH变量#edit/etc/profilesudovi/etc/profile#添加如下行exportPATH="$PATH:/home/long/node-v16.15.0-linux-arm64/bin"按esc退出编辑,输入:wq,回车保存退出,使变量立即生效sudo-ssource/etc/profile或者打开终端,单独执行exportPATH=一次"$PATH:/home/long/node-v16.15.0-linux-arm64/bin"4.安装yarnnpminstall--globalyarn--registry=https://registry.npm.taobao.org#使用淘宝加速yarn安装确认纱线-v5。安装VSCODE在第三章有提到,请在应用市场安装VSCODE(也可以到官网下载)。所有前端、GOLANG、PYTHON等均使用VSCODE进行项目开发建设6、安装配置nvm(nodejs版本管理)nvm可以让你通过命令行快速安装使用不同版本的node。nvm用于快速切换node版本https://github.com/nvm-sh/nvm...6.1使用示例$nvmuse16Nowusingnodev16.9.1(npmv7.21.1)$node-vv16.9.1$nvm使用14Now使用nodev14.18.0(npmv6.14.15)$node-vv14.18.0$nvminstall12Now使用nodev12.22.6(npmv6.14.5)$node-vv12.22.66.2installcurl-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#下载并安装设置变量exportNVM_DIR="$([-z"${XDG_CONFIG_HOME-}"]&&printf%s"${HOME}/.nvm"||printf%s"${XDG_CONFIG_HOME}/nvm")"[-s"$NVM_DIR/nvm.sh"]&&\."$NVM_DIR/nvm.sh"#这会加载nvm7。前后端接口联调工具7.1接口测试工具APIPost与后端接口联调的工具有很多,比如POSTMAN等,但都需要基于浏览器。这里推荐一个新的离线桌面工具APIPOST,支持麒麟和飞腾平台。下载导航页面:https://www.apipost.cn/downlo...下载地址:https://www.apipost.cn/dl.php...启动后效果7.2接口测试工具Apifoxhttps://www.apifox.cn/下载成功,安装启动后8.Electron官方工具8.1Electron官方fiddleElectron官方团队为开发者提供了一个更快捷的创建项目和进行实验的工具每次开发前端应用,都必须下载Electron并等待更多的时间和对需求的快速响应需要开发人员更多的耐心。我真的希望它更快,我相信很多开发人员也这样做,希望Electron团队开发出一种新工具,帮助我们在Electron中进行实时测试,让开发人员的生活更轻松。可以帮助我们快速创建和启动Electron的工具。它提供了一个可以快速启动的模板,你只需要更改一部分内容,选择一部分代码运行,就可以在ElectronProject中查看结果。此外,ElectronFiddle还可以将此代码保存为GithubGist,或保存在您的本地文件夹中。https://www.electronjs.org/fi...下载地址:https://github.com/electron/f...启动效果:麒麟系统专栏:https://segmentfault.com/blog...文章发表于SegmentFault联系邮箱:1179611323@qq.com群:662512340发布日志:20220613首次发布20220929添加节点版本管理工具nvm20221027添加接口测试工具apipost20221209添加接口测试工具apifox20221209添加electronjsfiddle官方验证工具