银河麒麟v10安装前端环境(Node、vue、Electron+vite)

此帖子所提到的所有依赖包都是基于银河麒麟v10真机的arm架构包,如果是在windows上的虚拟机上 把依赖包换成x64的包即可,方法步骤都是一样

一.node安装

原始方法安装(建议用第二种nvm方法,因为更简单):

1.1nodejs官网下载基于arm架构的包

1.1.1或者打开终端使用wget方式安装
wget https://nodejs.org/download/release/v18.19.0/node-v18.19.0-linux-arm64.tar.gz


1.2解压node包,常规方式解压或者使用命令解压都可

命令解压:

 tar -zxvf ./node-v18.19.0-linux-arm64.tar.gz 

1.3将node包移动到路径usr/sbin 或者usr/bin下 可直接剪切过去或者使用命令

sudo mv ./node-v18.19.0-linux-arm64 /usr/sbin

1.4将解压后的包改名为nodejs 名字自己取 直接重命名可能会因权限不够无法修改这里需要用到指令

 cd /usr/sbin/
sudo mv node-v18.19.0-linux-arm64/ nodejs

1.5对node和npm建立软链接 使之可以全局使用

sudo ln -s /usr/sbin/nodejs/bin/node /usr/sbin/
sudo ln -s /usr/sbin/nodejs/bin/npm /usr/sbin/

这是已经ok了  node -v和npm -v查看版本出现版本号就成了

使用nvm方式安装 简单粗暴:

1.安装nvm

链接: https://pan.baidu.com/s/1gPLPxtSahQnMQDHs__5UKQ 提取码: ABC1

安装成功后使用nvm -v查看版本,有版本号就ok

终端输入nvm install +node版本就可直接下载

nvm ls可查看下载的版本

node -v  npm-v 检查是否安装成功

二.安装vscode

需要下载基于arm架构的安装包 ,可去官网下载

这是我使用的包:https://pan.baidu.com/s/10sEREUuUgZQU7d2L27WhCw 提取码:ABC1

三.安装vue脚手架

npm install -g @vue/cli

四.切换淘宝镜像和安装cnpm

淘宝镜像:

//镜像最新地址
npm config set registry https://registry.npmmirror.com

安装cnpm:

npm install -g cnpm --registry=https://registry.npmmirror.com

五.创建vite+electron项目

这不多说了 之前文章有详细过程electron+vite+vue3项目搭建_electron+vite+vue3+js项目搭建-CSDN博客

主要说下electron环境问题主要看看electron包有没有在这个路径中


按照正常的vite+electron项目创建流程系统会自动将包下载到这个地方,如果没有手动加进去

在.cache文件夹中创建个electron文件夹把electron包放进去就ok

最后npm run dev启动就完事


如果使用vueCli脚手架创建项目 可能会遇到报错vue-cli-service: Permission denied

该错误是由于vue-cli-service文件权限不足导致的

解决方法:进入项目终端输入chmod 777 node_modules/.bin/vue-cli-service即可

重新npm run serve 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/312223.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

探索媒体查询的世界:适应多种设备的技巧与实践(上)

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云…

PDF结构详解

文章目录 介绍前言高保真的文件什么是PDF?PDF的一些优点版本摘要谁在使用PDF?有用的免费软件谁应该阅读 构建一个简单PDF文件基本PDF语法File StructureDocument ContentPage Content 构建简单PDF文件头目录,交叉引用表和文件尾主要对象图形内…

力扣hot100 二叉树的最近公共祖先 递归

Problem: 236. 二叉树的最近公共祖先 👨‍🏫 参考大佬题解 💖 图解 时间复杂度, 示例: O ( n ) O(n) O(n) 空间复杂度, 示例: O ( n ) O(n) O(n) 💖 AC code /*** Definition for a binary tree node.*…

PostgreSQL之SEMI-JOIN半连接

什么是Semi-Join半连接 Semi-Join半连接,当外表在内表中找到匹配的记录之后,Semi-Join会返回外表中的记录。但即使在内表中找到多条匹配的记录,外表也只会返回已经存在于外表中的记录。而对于子查询,外表的每个符合条件的元组都要…

概率论与数理统计-第7章 假设检验

假设检验的基本概念 二、假设检验的基本思想 假设检验的基本思想实质上是带有某种概率性质的反证法,为了检验一个假设H0,是否正确,首先假定该假设H0正确,然后根据抽取到的样本对假设H0作出接受或拒绝的决策,如果样本观察值导致了…

如何从 Keras 中的深度学习目录加载大型数据集

一、说明 数据集读取,使用、在磁盘上存储和构建图像数据集有一些约定,以便在训练和评估深度学习模型时能够快速高效地加载。本文介绍Keras 深度学习库中的ImageDataGenerator类等工具自动加载训练、测试和验证数据集。 二、ImageDataGenerator加载数据集…

CMake入门教程【高级篇】配置文件(configure_file)

😈「CSDN主页」:传送门 😈「Bilibil首页」:传送门 😈「动动你的小手」:点赞👍收藏⭐️评论📝 文章目录 1.configure_file作用2.详细使用说明3.完整代码示例4.实战使用技巧与注意事项5.总结分析1.configure_file作用

添加气泡与菜单

目录 1、添加气泡 1.1、文本提示气泡 1.2、带按钮的提示气泡 1.3、自定义气泡 2、菜单 2.1、创建默认样式的菜单 2.2、创建自定义样式的菜单 1、添加气泡 Popup属性可绑定在组件上显示气泡弹窗提示,设置弹窗内容、交互逻辑和显示状态。主要用于…

【野火i.MX6ULL开发板】利用microUSB线烧入Debian镜像

0、前言 烧入Debian镜像有两种方式:SD卡、USB SD卡:需要SD卡(不是所有型号都可以,建议去了解了解)、SD卡读卡器 USB:需要microUSB线 由于SD卡的网上资料很多了,又因为所需硬件(SD卡…

基于人工蜂群算法多无人机轨迹规划

#生物背景 蜜蜂是一种群居生物,生物学家研究发现蜜蜂以跳舞的方式来交换蜜源信息。根据分工的不同,蜜蜂被分为三个工种:引领峰、跟随蜂、侦察蜂。 侦察蜂的职责是侦察蜜源(即蜜蜂的食物),一旦某一个侦察蜂…

XCTF:MISCall[WriteUP]

使用file命令,查看该文件类型 file d02f31b893164d56b7a8e5edb47d9be5 文件类型:bzip2 使用bzip2命令可对该文件进行解压 bzip2 -d d02f31b893164d56b7a8e5edb47d9be5 生成了一个后缀为.out的文件 再次使用file命令,查看该文件类型 file…

2024最新适用于 Windows 、Mac 的最佳屏幕录制软件

屏幕录制软件可以帮助我们录制 PC 和MacBook的实时屏幕视频。如果您想为 优酷录制视频,或者您正在为您的公司制作基于视频的项目,并且需要捕获屏幕的实时视频录制,那么我们在此列出了 一 款适合您的 Windows 、Mac的 2024 年最佳屏幕录制软件…

Qt框架学习 --- CTK

系列文章目录 文章目录 系列文章目录前言一、准备阶段二、使用介绍1.核心思想2.源码2.1.框架部分资源目录树2.2.框架部分源码2.3.插件部分资源目录树2.4.插件部分源码 3.文件结构4.运行效果 总结 前言 随着开发的深入,CTK框架还是要关注一下。了解CTK还是有必要的。…

Apache Doris 聚合函数源码阅读与解析|源码解读系列

笔者最近由于工作需要开始调研 Apache Doris,通过阅读聚合函数代码切入 Apache Doris 内核,同时也秉承着开源的精神,开发了 array_agg 函数并贡献给社区。笔者通过这篇文章记录下对源码的一些理解,同时也方便后面的新人更快速地上…

【Oracle】数据库对象

一、视图 1、视图概述 视图是一种数据库对象 视图 > 封装sql语句 > 虚拟表 2、视图的优点 简化操作:视图可以简化用户处理数据的方式。着重于特定数据:不必要的数据或敏感数据可以不出现在视图中。视图提供了一个简单而有效的安全机制&#x…

Odrive 学习系列一:vscode 编译Odrive

搭建环境可参考Markerbase教程,很详细了。 简单说一两点: 解压ODrive-fw-v0.5.1.zip: 打开ODrive-fw-v0.5.1文件夹,找到Firmware文件夹,用vscode打开该文件夹: 按照以下内容操作: 编译工程: 打开 中断(terminal),输入 make -j4 回车 进行编译。编译…

基于JavaWeb+BS架构+SpringBoot+Vue基于hive旅游数据的分析与应用系统的设计和实现

基于JavaWebBS架构SpringBootVue基于hive旅游数据的分析与应用系统的设计和实现 文末获取源码Lun文目录前言主要技术系统设计功能截图订阅经典源码专栏Java项目精品实战案例《500套》 源码获取 文末获取源码 Lun文目录 1 概 述 5 1.1 研究背景 5 1.2 研究意义 5 1.3 研究内容…

C# FreeSql使用,基于Sqlite的DB Frist和Code First测试

文章目录 前言FreeSql 简单连接数据库服务不存在没装FreeSql.All装了FreeSql.All安装包选择 DBFirst安装命令行生成器生成Bat创建脚本 基于Sqlite的Code Frist文件夹自动导出到Debug目录Sqlite 数据库安装和创建Sqlite连接数据库自动增列增表测试增列删列改列名同名列改属性 Co…

python进行简单的app自动化测试(pywinauto)+ 截屏微信二维码

一、开始需要了解准备 1、安装 pip install pywinauto2、选择(后面会通过工具进行判断用哪个) 3、自动化控制进程的范围 示例 Application单进程 Desktop多进程 4、程序辅助检测工具 3中的下载连接 链接 点击放大镜拖到对应位置即可 二、简单的开始…

前端页面优化做的工作

1.分析模块占用空间 new (require(webpack-bundle-analyzer).BundleAnalyzerPlugin)() 2.使用谷歌浏览器中的layers,看下有没有影响性能的模块,或者应该销毁没销毁的 3.由于我们页面中含有很大的序列帧动画,所以会导致页面性能低&#xff0…