Mac下搭建Vue开发环境以及新建Vue项目及启动Vue项目

╰半橙微兮° 2023-07-13 10:56 2阅读 0赞

#### 1、安装HomeBrew，如果有了则忽略这一步： ####

#开始安装，中间可能要输入电脑密码，耐心等待即可安装成功。可通过brew -v 查看版本。
    ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"。

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

#### 2、如果使用HomeBrew下载一些东西速度很慢可以参考以下链接： ####

> [Mac的homebrew更换为阿里巴巴的源 （解决下载速度过慢问题）][Mac_homebrew_]

#### 3、安装Nodejs： ####

#终端输入下面命令即可开始安装nodejs
    brew install nodejs

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

#### 4、查看Nodejs版本： ####

#终端输入以下命令查看版本 我的v13.10.1
    node -v

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

#### 5、安装npm ： ####

#阿里淘宝镜像
    npm install -g cnpm --registry=https://registry.npm.taobao.org

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

#### 6、切换npm的源： ####

#查看npm的源
    npm config get registry
    #更换为淘宝的源
    npm config set registry https://registry.npm.taobao.org

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

#### 7、安装webpack： ####

> WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

#下列命令安装webpack
    cnpm install webpack -g

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

#### 8、安装vue脚手架（自动搭建vue项目框架的工具）： ####

#输入下列命令 安装vue脚手架 耐心等待下载完成 
    sudo npm install -g vue-cli

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

#### 9、查看vue是否安装成功： ####

vue list

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

#### 10、创建vue项目： ####

#xuanvuetest是项目名称 可以自行更改 这一步可能会很慢，耐心等待，如果过长，则退出重新运行
    vue init webpack xuanvuetest

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzQxODg0_size_16_color_FFFFFF_t_70 7]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzQxODg0_size_16_color_FFFFFF_t_70 8]

#### 11、启动vue项目（注意切换到你创建的vue项目的文件目录下）： ####

#启动项目 注意切换到你项目的文件目录下
    npm  run dev
    #关闭请ctrl+c

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

#### 12、打开图中地址： ####

#### [http://localhost:8080][http_localhost_8080] ####

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

#### 13、推荐使用Visual Stodio Code 管理Vue项目： ####

![在这里插入图片描述][20200311213739459.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzQxODg0_size_16_color_FFFFFF_t_70 11]

#### 14、遇到困难可以评论（有信必回）小轩微信号tangchenxuan1999 ####

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzQxODg0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200311200845534.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzQxODg0,size_16,color_FFFFFF,t_70
[Mac_homebrew_]: https://blog.csdn.net/qq_41741884/article/details/104804163
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzQxODg0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200311201232326.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzQxODg0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzQxODg0_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200311201351654.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzQxODg0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzQxODg0_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/202003112016262.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzQxODg0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzQxODg0_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200311212300658.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzQxODg0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzQxODg0_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200311202225264.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzQxODg0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzQxODg0_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200311202639990.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzQxODg0,size_16,color_FFFFFF,t_70
[20200311202728682.png]: https://img-blog.csdnimg.cn/20200311202728682.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzQxODg0_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200311203311975.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzQxODg0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzQxODg0_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200311212418154.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzQxODg0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzQxODg0_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20200311212901930.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzQxODg0,size_16,color_FFFFFF,t_70
[http_localhost_8080]: http://localhost:8080
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzQxODg0_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20200311212946623.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzQxODg0,size_16,color_FFFFFF,t_70
[20200311213739459.png]: https://img-blog.csdnimg.cn/20200311213739459.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzQxODg0_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20200311213649963.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzQxODg0,size_16,color_FFFFFF,t_70