mac学习vue之环境搭建

在Ubuntu上安装Vue.js环境时遇到了权限问题和命令未定义的问题。首先,通过更改npm的默认路径解决了权限错误,创建了~/.npm-global目录并配置环境变量。然后,尽管安装了vue-cli,执行vue命令时出现未定义的问题,可能是Vue CLI版本过低,通过卸载再安装解决。最后,vueui命令无响应,推测是因为Vue CLI版本低。整个过程比Windows系统更为复杂。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1,安装node.js&vsCode

    官网下载安装node.js

2,搭建vue环境

 安装淘宝镜像

sudo nom install -g cpm --registry=https://registry.npm.taobao.org --vervose

搭建cli脚手架

cpm install -g @vue/cli

1,发现报错,权限问题:

解决办法,https://www.liangzl.com/get-article-detail-212641.html



本人在安装完node.js后使用npm安装vue时遇到权限问题:

Error: EACCES: permission denied, symlink '../lib/node_modules/vue-cli/bin/vue-init' -> '/usr/local/bin/vue-init'
解决方法是改变npm的默认路径

创建一个全局目录:
mkdir ~/.npm-global
配置npm使用新目录:
npm config set prefix '~/.npm-global'
打开或创建一个~/.profile文件并添加以下环境变量:
vim ~/.profile // 打开~/.profile文件
export PATH=~/.npm-global/bin:$PATH  //添加环境变量
更新系统变量:
source ~/.profile
安装任一包测试配置是否成功(非必须):
npm install -g jshint

2,安装执行vue命令,报错:command is not defined

参考https://www.cnblogs.com/wz2018/p/9849000.html ,https://www.jianshu.com/p/29b653af669b

# Setting PATH for Python 3.9
# The original version is saved in .bash_profile.pysave
PATH="/Library/Frameworks/Python.framework/Versions/3.9/bin:${PATH}"
export PATH="$PATH:/Users/chenguoqing/.npm-global/bin/" //这个是安装vue后显示的地址,如参考所示

3,vue ui 命令无反应:应该是版本太低,卸载再安装

参考https://blog.youkuaiyun.com/qq_43571415/article/details/103781460

特此记录,使用windows搭建好想没这么多步骤=-=

### macOS Vue 3 开发环境配置教程 #### 安装 Xcode 命令行工具 为了确保开发环境中拥有必要的编译器和其他工具,建议先安装 Xcode 的命令行工具。可以通过终端输入以下命令来完成安装: ```bash xcode-select --install ``` #### 配置 Homebrew 包管理器 Homebrew 是 macOS 上非常流行的包管理和软件安装工具。通过它能够方便快捷地获取各种依赖项。 在终端中执行下面这条指令以安装 Homebrew: ```bash /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" ``` 之后可利用 `brew` 来安装 Node.js 和其他所需组件[^2]。 #### 设置 Node.js 运行时环境 Node.js 对于构建基于 JavaScript 或者其框架的应用程序至关重要。对于 Vue 项目来说也不例外。使用 Homebrew 可轻松安装最新版本的 Node.js: ```bash brew install node ``` 验证安装成功与否可通过查看当前已安裝的node版本号来进行确认: ```bash node -v npm -v ``` #### 使用 npm 或 cnpm 安装 Vue CLI 工具 Vue CLI 提供了一套完整的命令行接口用来创建、管理和优化 Vue 应用程序。推荐采用官方提供的 NPM 版本或者国内加速镜像 CNPM 来加快下载速度并提高稳定性。 如果选择使用CNPM,则需先全局安装淘宝NPM镜像客户端: ```bash npm install -g cnpm --registry=https://registry.npmmirror.com ``` 接着就可以借助 cnpm 来安装 vue-cli : ```bash cnpm install -g @vue/cli ``` 最后测试一下是否正确安装了 Vue CLI : ```bash vue --version ``` #### 创建新的 Vue 3 项目 有了上述准备工作后,现在可以开始建立一个新的 Vue 3.x 项目实例了。进入想要放置项目的文件夹路径下,然后运行如下命令: ```bash vue create my-vue-app ``` 按照提示操作直到完成整个过程。注意这里会询问关于所使用的Vue版本选项,请务必指定为 "Manually select features" 并挑选 Vue 3 支持的相关特性[^1]。 #### 编辑器的选择与插件支持 Visual Studio Code (VSCode) 被广泛认为是最好的轻量级编辑器之一,并且提供了丰富的扩展功能来增强用户体验。针对 Vue 开发而言,安装 Vetur 插件能极大地方便代码编写和调试工作。 #### 启动本地服务器预览效果 当一切准备就绪以后,进入到刚刚新建好的工程根目录里边去,再依次键入这两条语句开启服务端口监听模式以便实时观察页面变动情况: ```bash cd my-vue-app npm run serve ``` 此时浏览器应该自动跳转至 http://localhost:8080 地址处展示默认首页界面;如果没有的话也可以手动访问该链接地址[^3]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

智商不够_熬夜来凑

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

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

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

打赏作者

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

抵扣说明:

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

余额充值