在Alpine Linux上安装和使用Node.js,打造开发和测试的环境。

apk仓库打开社区的源。

先在命令行中使用命令apk search nodejs npm yarn对仓库源进行搜索,,看看nodejs、yarn、npm的版本情况。

localhost:~# apk search nodejs npm yarn
nodejs-20.15.1-r0
nodejs-current-21.7.3-r0
nodejs-current-dev-21.7.3-r0
nodejs-current-doc-21.7.3-r0
nodejs-dev-20.15.1-r0
nodejs-doc-20.15.1-r0
nodejs-libs-20.15.1-r0
npm-10.8.0-r0
npm-bash-completion-10.8.0-r0
npm-doc-10.8.0-r0
pulumi-language-nodejs-3.115.0-r3
py3-hatch-nodejs-version-0.3.2-r1
py3-hatch-nodejs-version-pyc-0.3.2-r1
xen-4.18.3-r1
yarn-1.22.22-r0
localhost:~# 

安装Node.js:

localhost:~# apk add nodejs
fetch http://mirrors.ustc.edu.cn/alpine/v3.20/main/x86_64/APKINDEX.tar.gz
fetch http://mirrors.ustc.edu.cn/alpine/v3.20/community/x86_64/APKINDEX.tar.gz
(1/5) Installing ada-libs (2.7.8-r0)
(2/5) Installing libbase64 (0.5.2-r0)
(3/5) Installing icu-data-en (74.2-r0)
Executing icu-data-en-74.2-r0.post-install
*
* If you need ICU with non-English locales and legacy charset support, install
* package icu-data-full.
*
(4/5) Installing icu-libs (74.2-r0)
(5/5) Installing nodejs (20.15.1-r0)
Executing busybox-1.36.1-r29.trigger
OK: 582 MiB in 124 packages

确认Node.js已经正确安装并正在运行:

localhost:~# node -v
v20.15.1

安装npm:

localhost:~# apk add npm
(1/1) Installing npm (10.8.0-r0)
Executing busybox-1.36.1-r29.trigger
OK: 594 MiB in 125 packages

确认npm已经正确安装并正在运行:

localhost:~# npm -v 
10.8.0

为npm配置国内仓库:

localhost:~# npm config set registry https://registry.npmmirror.com

使用npm包管理器全局安装vue:

localhost:~# npm install -g @vue/cli
npm warn deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm warn deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated…… 略 ……npm warn deprecated subscriptions-transport-ws@0.11.0: The `subscriptions-transport-ws` package is no longer maintained. We recommend you use `graphql-ws` instead. For help migrating Apollo software to `graphql-ws`, see https://www.apollographql.com/docs/apollo-server/data/subscriptions/#switching-from-subscriptions-transport-ws    For general help using `graphql-ws`, see https://github.com/enisdenjo/graphql-ws/blob/master/README.md
npm warn deprecated vue@2.7.16: Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.added 838 packages in 1m75 packages are looking for fundingrun `npm fund` for details

创建一个vue项目测试一下:

localhost:~# npm create vue@latest
Need to install the following packages:
create-vue@3.11.0
Ok to proceed? (y) y> npx
> create-vueVue.js - The Progressive JavaScript FrameworkRangeError: Incorrect locale information provided✔ Project name: … vuedemo
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / YesScaffolding project in /root/vuedemo...Done. Now run:cd vuedemonpm installnpm run formatnpm run dev

创建完成后,进入目录中安装并运行项目

localhost:~# cd vuedemo
localhost:~/vuedemo# npm installadded 312 packages in 48s82 packages are looking for fundingrun `npm fund` for details
localhost:~/vuedemo# npm run format> vuedemo@0.0.0 format
> prettier --write src/src/App.vue 318ms
src/assets/base.css 46ms (unchanged)
src/assets/main.css 14ms (unchanged)
src/components/HelloWorld.vue 109ms
src/components/icons/IconCommunity.vue 20ms
src/components/icons/IconDocumentation.vue 12ms
src/components/icons/IconEcosystem.vue 17ms
src/components/icons/IconSupport.vue 6ms
src/components/icons/IconTooling.vue 9ms (unchanged)
src/components/TheWelcome.vue 84ms
src/components/WelcomeItem.vue 64ms (unchanged)
src/main.ts 32ms (unchanged)
src/router/index.ts 26ms
src/stores/counter.ts 48ms (unchanged)
src/views/AboutView.vue 16ms (unchanged)
src/views/HomeView.vue 11ms (unchanged)

修改package.json文件。找到scripts下面的dev,在vite后面添加--host 0.0.0.0

localhost:~/vuedemo# cat package.json 
{"name": "vuedemo","version": "0.0.0","private": true,"type": "module","scripts": {"dev": "vite --host 0.0.0.0","build": "run-p type-check \"build-only {@}\" --","preview": "vite preview","build-only": "vite build","type-check": "vue-tsc --build --force","lint": "eslint . --fix","format": "prettier --write src/"},"dependencies": {"pinia": "^2.2.4","vue": "^3.5.11","vue-router": "^4.4.5"},"devDependencies": {"@tsconfig/node20": "^20.1.4","@types/node": "^20.16.11","@vitejs/plugin-vue": "^5.1.4","@vue/eslint-config-prettier": "^10.0.0","@vue/eslint-config-typescript": "^14.0.0","@vue/tsconfig": "^0.5.1","eslint": "^9.12.0","eslint-plugin-vue": "^9.28.0","npm-run-all2": "^6.2.3","prettier": "^3.3.3","typescript": "~5.5.4","vite": "^5.4.8","vite-plugin-vue-devtools": "^7.4.6","vue-tsc": "^2.1.6"}
}

运行开发模式:

localhost:~/vuedemo# npm run dev> vuedemo@0.0.0 dev
> vite --host 0.0.0.0VITE v5.4.8  ready in 1163 ms➜  Local:   http://localhost:5173/➜  Network: http://192.168.10.153:5173/➜  Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window➜  Vue DevTools: Press Alt(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools➜  press h + enter to show help

远程机器的浏览器浏览结果:

在这里插入图片描述

安装yarn:

yarn和npm其实二选一即可,当然想两个都安装也可以。

localhost:~# apk add yarn
(1/1) Installing yarn (1.22.22-r0)
Executing busybox-1.36.1-r29.trigger
OK: 599 MiB in 126 packages

yarn的功能就不重复测试了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/news/913215.shtml
繁体地址,请注明出处:http://hk.pswp.cn/news/913215.shtml
英文地址,请注明出处:http://en.pswp.cn/news/913215.shtml

如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Apache Commons Pool中的GenericObjectPool详解

GenericObjectPool 是 Apache Commons Pool 库中的核心类,用于实现对象的池化管理,适用于数据库连接、HTTP 客户端、线程等昂贵资源的复用。以下从核心概念、工作原理、参数配置、使用场景及最佳实践等方面详细解析: ⚙️ 一、核心概念与组成…

攻防世界CTF题目解析系列————(1)

题目来源:攻防世界wife_wife 打开题目之后,发现登录界面,然后尝试弱口令,sql二次注入,xss发现都没有,然后看见下面go register(去注册)按钮 成功注册(username和password随便搞&…

楚存科技SD NAND贴片式T卡—高性能存储解决方案、赋能AI智能硬件

楚存科技SD NAND贴片式T卡—高性能存储解决方案、赋能AI智能硬件应用 在 AIoT 技术重构产业生态的时代浪潮中,智能硬件正从单一功能终端向数据枢纽演进 —— 智能家居设备日均产生 TB 级交互数据,工业物联网传感器需实时存储生产参数,车载智…

Python[数据结构及算法 --- 查找]

一.顺序查找&#xff08;无序表&#xff09;&#xff1a; def sequentialSearch(alist, item):pos 0found Falsewhile pos < len(alist) and not found:if alist[pos] item:found Trueelse:pos pos 1return foundtestlist [1, 2, 32, 8, 17, 19, 42, 13, 0] print(s…

Seata Saga模式实战:Java微服务中的分布式事务管理

在分布式系统中&#xff0c;Saga模式是一种用于管理跨多个服务的事务的柔性事务解决方案。它通过将长事务拆分为多个本地事务&#xff08;每个事务对应一个服务的操作&#xff09;&#xff0c;并通过补偿机制保证最终一致性。以下是Java中Saga模式的详细介绍&#xff0c;包括实…

若依学习笔记1-validated

<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!-- 保证 Spring AOP 相关的依赖包 --><dependency><groupId>org.springframework.boot<…

Excel 如何处理更复杂的嵌套逻辑判断?

处理复杂的嵌套逻辑判断&#xff0c;是Excel进阶路上必然会遇到的一道坎。当简单的IF函数“套娃”变得冗长、难以阅读和维护时&#xff0c;我们就需要更高级、更清晰的工具。 这里介绍三种从基础到高级的处理方法&#xff1a; 传统的 IF 函数嵌套 (经典&#xff0c;但容易混乱)…

使用Claude和MCP增强Selenium

1.配置MCP服务器打开Claude Desktop—>Settings—>Developer—>Edit Config{"mcpServers": {"selenium": {"command": "npx","args": ["-y", "angiejones/mcp-selenium"]}} }配置完成后重启Cl…

数据仓库锚点建模方法的前世今生

数据仓库锚点建模方法&#xff08;Anchor Modeling&#xff09;作为一种面向复杂数据环境的创新方法论&#xff0c;其发展历程与技术演进深刻反映了数据管理从结构化到动态化的转型需求。以下从起源、发展、核心思想、技术演进及未来趋势五个维度&#xff0c;系统梳理锚点建模的…

<三>Sping-AI alibaba 文生图

环境和配置请看&#xff1c;二&#xff1e;Sping-AI alibaba 入门-记忆聊天及持久化 源代码&#xff1a;https://github.com/springaialibaba/spring-ai-alibaba-examples/blob/main/spring-ai-alibaba-image-example/dashscope-image/src/main/java/com/alibaba/cloud/ai/exam…

vue组件和模板

好的&#xff0c;我们来详细解释一下在 Vue&#xff08;以及现代前端开发&#xff09;中两个最核心的概念&#xff1a;组件 (Component) 和 模板 (Template)。 理解了它们&#xff0c;就等于掌握了现代 Web 应用开发的基石。 一个核心比喻&#xff1a;乐高积木 在开始前&…

python学习打卡:DAY 18 推断聚类后簇的类型

浙大疏锦行 聚类后的分析&#xff1a;推断簇的类型 知识点回顾&#xff1a; 推断簇含义的2个思路&#xff1a;先选特征和后选特征通过可视化图形借助ai定义簇的含义科研逻辑闭环:通过精度判断特征工程价值 作业&#xff1a;参考示例代码对心脏病数据集采取类似操作&#xff0c;…

Ubuntu for ARM 更换为阿里云镜像源

1. 简介 该镜像适用于配置 ARM, PowerPC 等其他架构的 ubuntu系统&#xff0c;不适用 x86 &#xff01;&#xff01;&#xff01; 各种版本的Ubuntu for ARM下载地址&#xff1a;https://cdimage.ubuntu.com/releases 2. 配置方法 打开 sources.list 文件。 vim /etc/apt/s…

HTML与JavaScript:构建动态交互式Web页面的基石

HTML与JavaScript&#xff1a;构建动态交互式Web页面的基石 在现代Web开发中&#xff0c;HTML和JavaScript是不可或缺的两位主角。HTML负责页面的结构和内容&#xff0c;而JavaScript则赋予页面生命&#xff0c;使其能够响应用户交互、动态更新内容&#xff0c;并与后端服务进…

Python数据分析基础03:探索性数据分析

相关文章&#xff1a; 《python数据分析基础02&#xff1a;数据可视化分析》 《Python数据分析基础01&#xff1a;描述性统计分析》 探索性数据分析&#xff08;Exploratory Data Analysis, EDA&#xff09; 的深度解析&#xff0c;涵盖核心目标、方法论框架、关键技术及可视…

D3 面试题100道之(41-60)

这里是D3的面试题,我们从第 41~60题 开始逐条解答。一共100道,陆续发布中。 🟩 面试题(第 41~60 题) 41. D3 中如何添加图例? 图例可以通过手动创建 SVG 元素或使用 D3 的辅助函数来实现。常见做法是结合 d3.scaleOrdinal() 和 .range() 创建颜色映射图例。 示例: c…

Spring Boot事件驱动模型深度解析

目录 一、什么是Spring事件机制&#xff1f; 与传统方法调用的对比&#xff1a; 二、四大核心组件解析 1. ApplicationEvent&#xff1a;事件对象 2. ApplicationEventPublisher&#xff1a;事件发布器 3. ApplicationListener&#xff1a;事件监听接口 4. EventListener…

Python gmssl.SM4使用案例

Python gmssl.SM4使用案例 摘要:在异构计算系统验证中,通常会有数据加解密的要求,例如用户数据、权重参数等,本文将详细介绍在UVM验证环境中,调用Python的gmssl库,用SM4实现加解密的验证方案。 一、Python gmssl 库介绍 gmssl 是一个开源的、纯Python实现的国密算…

迅为高情性6TOPS算力的RK3576开发板NPU rknn-model-zoo例程演示

迅为iTOP-3576开发板采用瑞芯微RK3576高性能、低功耗的应用处理芯片&#xff0c;集成了4个Cortex-A72和4个Cortex-A53核心&#xff0c;以及独立的NEON协处理器。它适用于ARM PC、边缘计算、个人移动互联网设备及其他多媒体产品。支持INT4/INT8/INT16/FP16/BF16/TF32混合运算&am…

rsync 命令详解

目录 rsync 传输备份工作原理详解一、核心算法:差异传输二、传输流程三、关键技术四、与cp/scp复制的本质区别rsync的使用基本语法常用选项常用组合案例1. **本地目录同步**2. **远程同步(SSH协议)**3. **删除目标端多余文件**4. **排除特定文件**5. **限速传输(避免占用带…