Mac OS下安装Vue完整步骤

最新推荐文章于 2025-06-19 11:54:38 发布
原创 最新推荐文章于 2025-06-19 11:54:38 发布 · 1.5k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #vue安装 #mac下安装 #mac下安装vue #node.

本文详细介绍了在Mac OS环境下安装Vue.js的完整步骤，包括使用brew安装，处理可能出现的网络问题，安装Node.js（自动与手动方式），安装vue-cli和webpack，以及配置vue开发工具VSCode。

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

安装brew

  1. 首先安装brew，已经安装的则跳至下一步
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

这里如果执行报错：

Failed to connect to raw.githubusercontent.com port 443: Connection refused

原因是https://raw.githubusercontent.com这个域名被国内和谐了，但是我们可以通过真实ip来进行访问。

  • 在https://www.ipaddress.com/查询raw.githubusercontent.com的真实IP。
  • 在这里插入图片描述
  • 修改hosts
sudo vim /etc/hosts
  • 添加

                

                
                
        

    

    
  


        

            

                      
                        最低0.47元/天 解锁文章
                        

                          
200万优质内容无限畅学

                          
                        

                      
            

        


    



                



	

		

			

				
					
MacOS下安装Vue.js

				
			

			

				

					qq_42771487的博客
				

				

					11-25
					
					5075
					
				

			

		

		

			
				
一、开发环境

bew
Mac 下的一个包管理工具，可以在mac上安装、卸载、更新各种软件包。

MacBook-Pro / % brew -v
Homebrew 3.3.5-28-g3ab140e
Homebrew/homebrew-core (git revision 63e2388f12d; last commit 2021-11-24)
Homebrew/homebrew-cask (git revision b8049f243b; last commit 2021-11-24)

brew ins

			
		

	



                

            
              



	

		

			

				
					
Mac 安装vue

				
			

			

				

					yesterday_lover的博客
				

				

					06-03
					
					453
					
				

			

		

		

			
				
总共需要安装5个内容:
brew node  cnpm webpack vue-cli
其中npm在node安装完就有了,由于有时npm太慢,所以用cnpm
1.安装Homebrew:
参考

https://blog.csdn.net/yesterday_lover/article/details/117450338

2.安装node.js,在终端中运行：
brew install nodejs

也可以下载后安装,下载地址:

https://nodejs.org/en/download/

3.安 

			
		

	



              


  
              

                


	

		

			

				
					
mac版vue谷歌浏览器插件vue-devtoos

				
			

			

				

					02-15
				

			

		

		

			
				
已经配置好的vue 插件在浏览器扩展程序直接可以使用。mac版的chrome

			
		

	





	

		

			

				
					
mac os 安装vue

				
			

			

				

					weixin_42401237的博客
				

				

					03-20
					
					725
					
				

			

		

		

			
				
最近使用django做了个后端，打算用vue来做前端的工作，故整理了一个简单的教程。

一：安装vue

1.安装node.js

https://nodejs.org/zh-cn/download/

下载macos版本，一路点击继续即可。



2.安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

在...

			
		

	



		

			
		



	

		

			

				
					
Mac 安装ElasticSearch和Kibana详细教程

					
最新发布

				
			

			

				

					
				

				

					06-19
					
					1447
					
				

			

		

		

			
				
本文介绍了Elasticsearch和Kibana的安装配置流程。首先下载Elasticsearch并解压安装，通过访问localhost:9200验证安装。系统会自动生成默认用户名(elastic)和密码，可在控制台查看。接着使用elasticsearch-setup-passwords命令重置密码，并为kibana_system用户设置密码。然后安装Kibana前需确认Node.js环境，下载后启动服务，通过localhost:5601访问。最后配置Elasticsearch连接地址，使用kibana_

			
		

	





	

		

			

				
					
Mac 安装 vue3 环境

				
			

			

				

					qq_61842012的博客
				

				

					06-18
					
					5603
					
				

			

		

		

			
				
Mac 如何配置 vue3 环境并使用ui 界面/ vscode 管理你的vue 项目。本教程仅适用于了解网络长城且会魔法的用户，配置全程需要稳定连接真正的互联网，否则你会因由于下载 nodejs 而绑定下载的 npm 包时遇到漫长的等待时间......

			
		

	





	

		

			

				
					
Mac环境 chrome安装 vue-devtools插件

				
			

			

				

					qq_41399411的博客
				

				

					06-10
					
					687
					
				

			

		

		

			
				
1.先从github克隆项目
git clone -b master https://github.com/vuejs/vue-devtools.git

2.进入项目的根目录，安装依赖
cnpm install

3.打包项目
npm run build

4.进入项目文件夹/shells/chrome
拷贝chrome文件夹到chrome浏览器的文件夹中
/用户/simon/资源库/Application Support/Google/Chrome/Default

5.进入谷歌浏览器，输入chrome

			
		

	





	

		

			

				
					
通过实例解析chrome如何在mac环境中安装vue-devtools插件

				
			

			

				

					10-15
				

			

		

		

			
				
本文将详细介绍如何在Mac OS环境下安装Vue DevTools插件，并通过实际操作步骤帮助用户快速完成安装。  首先，我们要知道Chrome DevTools是一组内置于Google Chrome浏览器中的网页开发者工具，它可以帮助开发者检查和...

			
		

	





	

		

			

				
					
test-electron-vue用来获取电脑mac地址

				
			

			

				

					04-20
				

			

		

		

			
				
要使用test-electron-vue获取MAC地址，首先需要下载项目资源，并在项目根目录下执行以下命令：  ```bash cnpm i ```  这会安装所有必要的依赖，包括Electron、Vue.js以及可能需要的其他库。接下来，执行以下命令启动...

			
		

	





	

		

			

				
					
Macbook搭建vue开发环境

				
			

			

				

					ImSeniorProgrammer的博客
				

				

					04-17
					
					8923
					
				

			

		

		

			
				
一、Vue2.0推荐开发环境



注：上面的图片转自Vue2.0 新手入门 — 从环境搭建到发布

本人使用的各个工具的版本为：
Homebrew 3.4.6
node.js v17.9.0
npm 8.5.5

cnpm:
webpack 3.2.0
Vue 2.8.2

一、安装brew


1、打开终端运行以下命令：


/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"


.

			
		

	





	

		

			

				
					
Vue学习 之 MacOS 安装 vue-cli

				
			

			

				

					竹毛言己
				

				

					06-13
					
					3685
					
				

			

		

		

			
				
vue-cli（Vue Command Line Interface）是Vue.js官方提供的一个脚手架工具，它提供了一些命令，可以帮助我们创建基于Vue.js的项目模板，快速开发Vue.js单页面应用（SPA）。使用vue-cli可以配置构建工具、插件、路由、状态管理等等，可以大大提升开发效率，减少重复操作。

			
		

	





	

		

			

				
					
mac vue环境搭建详细教程

				
			

			

				

					01-03
				

			

		

		

			
				
mac vue环境搭建详细教程，实际亲测可运行。

			
		

	





	

		

			

				
					
【Vue篇】mac上Vue 开发环境搭建、运行Vue项目（保姆级）

				
			

			

				

					小韩的博客
				

				

					09-09
					
					1万+
					
				

			

		

		

			
				
【Vue篇】mac上Vue 开发环境搭建、运行Vue项目（保姆级）

			
		

	





	

		

			

				
					
mac 安装vue全网最详细教程

					
热门推荐

				
			

			

				

					cuishao
				

				

					04-29
					
					1万+
					
				

			

		

		

			
				
1、安装vue：
下载安装包，直接安装：下载 | Node.js 中文网
查看版本号，检测是否安装成功：npm -v
2、安装cnpm：
sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

同样是通过查看版本号查看安装状态：cnpm -v
3、安装vue-cli 脚手架：
sudo npm install -g @vue/cli

这个过程比较慢，一直enter键下一步，直到安装成功
查看版本号 ：vue -V
4、创建项

			
		

	





	

		

			

				
					
 Mac OS X下安装Vue脚手架（vue-cli）

				
			

			

				

					weixin_34248118的博客
				

				

					10-13
					
					643
					
				

			

		

		

			
				
前言
Vue作为前端三大框架（Angular，React，Vue）之一，号称是最简单，最容易上手的框架，同时也是行内的大趋势，还可以用来开发最火的小程序。具有开发快，双向数据流等特点，有些人认为Vue是Angular和React的结合，既有Angular的模板语法也有React的组件化体系，以至于促使其发展飞快。下面来就来讲讲Vue脚手架...

			
		

	





	

		

			

				
					
在mac上配置vue开发环境

				
			

			

				

					kikoslee的博客
				

				

					03-10
					
					4134
					
				

			

		

		

			
				
在mac上安装brew，安装nodejs，安装webpack，安装vue，创建vue项目，安装vue项目依赖，启动vue项目

			
		

	





	

		

			

				
					
Mac安装Vue

				
			

			

				

					qq_68384595的博客
				

				

					03-29
					
					3972
					
				

			

		

		

			
				
随着学习的进程，也是从web学习到了Vue，vue是一个渐进式框架但是在安装的同时也有很多的问题，下面让我们来一起看一下小编遇到的问题吧提示：以下是本篇文章正文内容，下面案例可供参考以上就是我在装vue的时候的教程和安装时候的问题和解决的办法，希望有用mac的小伙伴可以用到我说说的。不会的也可以给我发私信询问我。

			
		

	





	

		

			

				
					
Mac如何搭建Vue项目

				
			

			

				

					大圣归来圣骑士清欢的博客
				

				

					11-21
					
					3425
					
				

			

		

		

			
				
将安装包放在 ./node_modules 下（运行 npm 命令时所在的目录）如果没有 node_modules 目录，会在当前执行npm 命令的目录下生成node_modules 目录。assets：一般放置静态资源（一般放置多个组件公用的静态资源）需要注意放置在assets文件夹的静态资源在webpack打包时,会把静态资源当做一个模块打包在js文件里面。npm 的包安装分为本地安装（local），全局安装（global）两种，从命令行来看，差别只是有没有-g而已，比如。

			
		

	





	

		

			

				
					
mac brew 安装vue

				
			

			

				

					03-19
				

			

		

		

			
				
### 安装 Vue.js 开发环境

要在 macOS 上使用 Homebrew 安装 Vue.js 的开发环境，可以按照以下方法操作：

#### 1. 确认 Homebrew 已正确安装
在终端输入 `brew -v` 来确认 Homebrew 是否已成功安装并查看其版本号[^3]。如果未安装，则可以通过以下命令完成安装：
```bash
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```

#### 2. 使用 Homebrew 安装 Node.js
Vue.js 需要依赖于 Node.js 运行环境。因此，在安装 Vue CLI 前需先安装 Node.js。执行以下命令来安装最新版的 Node.js：
```bash
brew install node
```
此命令会自动配置好 Node.js 和 npm（Node Package Manager），这是后续安装 Vue 所必需的基础工具[^2]。

#### 3. 验证 Node.js 及 npm 版本
为了确保 Node.js 成功安装，可分别运行以下两条指令验证版本信息：
```bash
node -v
npm -v
```
上述两步完成后即可继续下一步骤[^1]。

#### 4. 全局安装 Vue CLI
有了 Node.js 支持之后，便能利用 npm 或 yarn 实现 Vue CLI 的全局部署。推荐采用官方建议的方式进行安装：
```bash
npm install -g @vue/cli
```
或者如果你更倾向于 Yarn ，也可以这样操作：
```bash
yarn global add @vue/cli
```

#### 5. 测试 Vue CLI 是否正常工作
最后一步就是检验 Vue CLI 是否被正确设置好了。打开一个新的 Terminal 并键入下面这条语句看看是否有返回值以及具体的内容是什么样的情况。
```bash
vue --version
```

至此为止，你应该已经顺利构建起了基于 Mac OS X 的 Vue.js 应用程序开发平台！

```python
print("Your Vue.js development environment is now ready!")
```

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值