armbian ubuntu 小盒子安装nodejs npm vue3 环境

本文讲述了作者如何在LinuxARM64系统中卸载默认版本过低的Node.js,从FTP下载并手动安装特定版本,设置符号链接以确保npmcreatevue功能正常,以及解决npmrundev的网络访问问题,实现跨机器局域网访问的Vue开发环境搭建过程。

1.直接通过apt-get install nodejs 的版本太低了 我的是v12 我试了下

npm create vue@latest这种方式不行

所以就卸载了自动安装的nodejs     apt remove nodejs

去淘宝的ftp上下载对应的版本

CNPM Binaries Mirror

我的小盒子是linux arm64版本

wget 之后解压

然后创建符号链接

ln /home/QMCY/node/node-v20.11.0-linux-arm64/bin/node /usr/bin/node
ln -s /home/QMCY/node/node-v20.11.0-linux-arm64/lib/node_modules/npm/bin/npm-cli.js /usr/bin/npm

这样直接敲 node -v     npm -v 都有作用了

这样 就可以通过npm create vue@latest 来创建vue项目了

 

这样 npm run dev就可以访问了

但是有一个问题默认的是 绑定的是127.0.0.1  小盒子是命令行的 没有浏览器 只能从局域网其他机器访问 这样是访问不了的 

需要这样

npm run dev -- --host 0.0.0.0 --port 3000

可以看到已经提示了Network的访问方式

确实也能访问了。这样vue的开发环境就搭好了

### 配置 Vue3 开发环境 要在 Ubuntu 系统中通过 Visual Studio Code (VSCode) 安装并配置 Vue3 开发环境,可以按照以下方法操作: #### 1. 更新系统包管理器 确保系统的软件包是最新的版本。可以通过执行以下命令来完成此操作: ```bash sudo apt update && sudo apt upgrade -y ``` #### 2. 安装 Node.js 和 NPM Vue 的 CLI 工具依赖于 Node.js 和 npm(Node Package Manager)。因此需要先安装它们。推荐使用 NodeSource 提供的二进制分发库来进行安装。 ```bash curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash - sudo apt-get install -y nodejs ``` 验证安装是否成功以及其版本号: ```bash node --version npm --version ``` 这一步骤非常重要,因为 Vue CLI 及其他工具都需要这些基础组件的支持[^1]。 #### 3. 设置国内镜像源加速下载速度 为了提高后续模块的下载效率,建议设置淘宝提供的 cnpm 镜像作为默认注册表地址。 ```bash npm config set registry https://registry.npmmirror.com ``` 确认更改后的配置情况: ```bash npm get registry ``` 如果返回 `https://registry.npmmirror.com` 则表示修改生效[^4]。 #### 4. 全局安装 Vue CLI 接下来全局安装最新版的 Vue CLI 来创建和管理项目。 ```bash sudo npm install -g @vue/cli ``` 测试 vue 是否正确安装: ```bash vue --version ``` 注意这里提到的是新版 Vue CLI 而不是旧版脚手架工具[^2]。 #### 5. 创建一个新的 Vue 项目 利用刚刚安装好的 Vue CLI 命令行界面快速初始化一个新工程目录结构。 ```bash vue create my-vue-app ``` 根据提示选择预设选项或者手动挑选特性加入到您的应用当中去比如 TypeScript 支持等自定义功能项。 进入新建的应用文件夹内部继续下一步工作流安排。 ```bash cd my-vue-app ``` #### 6. 启动本地服务器查看效果 现在可以直接启动内置的服务端口监听机制从而实时观察网页渲染变化状况啦!只需简单输入如下指令即可实现上述目标哦~ ```bash npm run serve ``` 打开浏览器访问 http://localhost:8080 即可看到欢迎页面展示出来证明一切正常运转起来了呢😊[^3] #### 7. 使用 VSCode 编辑代码 最后不要忘记开启我们最爱使用的编辑神器——Visual Studio Code 对该项目进行进一步完善优化处理呀~ 进入终端再次定位至刚才克隆下来的仓库路径之下再键入下面这条神奇咒语召唤它现身吧! ```bash code . ``` --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

QMCY_jason

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值