Mac OS下安装Vue完整步骤

小灰灰 2022-10-27 02:17 442阅读 0赞

### 文章目录 ###

*   *  一、安装brew
     *  二、安装node js
     *   *  2.1 自动安装
         *  2.2 手动安装
     *  三、安装vue
     *  四、vue开发工具

--------------------

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70_pic_center]

--------------------

## 一、安装brew ##

首先安装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。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70]
 *  修改hosts

sudo vim /etc/hosts

*  添加如下内容

199.232.68.133 raw.githubusercontent.com

*  如果仍然报错：

remote: Enumerating objects: 49, done.
    remote: Counting objects: 100% (49/49), done.
    remote: Compressing objects: 100% (49/49), done.
    error: RPC failed; curl 18 transfer closed with outstanding read data remaining
    fatal: The remote end hung up unexpectedly
    fatal: early EOF
    fatal: index-pack failed
    Failed during: git fetch origin --force

我们可以先ping一下github.com看看是否通，如果不通则同上述处理，只不过这次使用github.com的真实域名。

如果还是不行的话，也别费那个劲了，直接跳过这步，使用下面手动安装就行了。

也可以参考下面的文章：[M1芯片的Mac安装homebrew][M1_Mac_homebrew]

## 二、安装node js ##

两种方式自己选择

### 2.1 自动安装 ###

*  终端直接执行

brew install nodejs

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 1]

因为我的已经装过nodejs，所以最后面提示可以使用reinstall

*  添加权限

sudo chmod -R 777 /usr/local/lib/node_modules/

### 2.2 手动安装 ###

1.  访问nodejs官网，点击Current 区域稳定版，并下载[https://nodejs.org/en/][https_nodejs.org_en]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 2]
2.  下载之后，直接点击运行，一路默认就行，直到安装完成。
3.  终端输入查看版本号，是否安装成功。

npm -v
    node -v

![在这里插入图片描述][20210203110542938.png]

## 三、安装vue ##

*  终端输入安装vue

npm i -g vue

![在这里插入图片描述][20210203110618545.png]

*  安装vue-cli

npm install -g vue-cli

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 3]

*  安装webpack

npm install -g webpack

![在这里插入图片描述][20210203110721894.png]

> 1、如果前面几步操作出现问题，可以重复的操作几遍，因为可能是你的网络问题  
> ![在这里插入图片描述][20210203112240246.png]  
> 2、如果提示日志文件报错，就找到日志文件删除，重新输入操作命令即可；  
> ![在这里插入图片描述][20210203112301620.png]

*  创建vue项目

vue init webpack myvue

## 四、vue开发工具 ##

vue开发工具有很多，对比就不在这说了，这里以WebStorm为例。

1.  下载WebStorm，[https://www.jetbrains.com/webstorm/download/\#section=mac][https_www.jetbrains.com_webstorm_download_section_mac]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 4]
2.  下载完压缩包直接解压安装就能使用了。

—————————————————————————————————

创建第一个程序HelloWorld！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221024/bab128a427e14edcbfe829a525ecc998.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70]: /images/20221024/48669478b7044f3197f50ec32a27f542.png
[M1_Mac_homebrew]: https://blog.csdn.net/qq1808814025/article/details/112667458
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 1]: /images/20221024/7111219ac8ae49d8926134b11b97ba15.png
[https_nodejs.org_en]: https://nodejs.org/en/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 2]: /images/20221024/a44b6703a43142c7896389c7bee611e4.png
[20210203110542938.png]: /images/20221024/01e5f3171354430598115cdf19999557.png
[20210203110618545.png]: /images/20221024/4dcdac17ae1943a98721adee75ac4141.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 3]: /images/20221024/56287cad55fa45619b077e1bc08f17c4.png
[20210203110721894.png]: /images/20221024/633be7ef6dfd47d1857b9d68a9ba36a1.png
[20210203112240246.png]: /images/20221024/7a5a81de6153432fa49b0866f9549edd.png
[20210203112301620.png]: /images/20221024/c900c36d3145466f89fa9c7d861a2620.png
[https_www.jetbrains.com_webstorm_download_section_mac]: https://www.jetbrains.com/webstorm/download/#section=mac
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxMTgwODgxNDAyNQ_size_16_color_FFFFFF_t_70 4]: /images/20221024/8374e9de2f114a45aa1a2aa1f4bf17eb.png