在mac系统中安装vue

布满荆棘的人生 2023-02-17 05:04 78阅读 0赞

# 在mac系统中安装vue #

# 1.安装node #

## 1.1.首先，去官网下载nodejs ： http://nodejs.cn/ ##

*  ①。点击下载  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70]
 *  ②。选择mac版本点击下载  
    ![\- \[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6HP4CvWu-1591943697855)(/Users/wangyang/Library/Application Support/typora-user-images/image-20200612141417814.png)\]][- _img-6HP4CvWu-1591943697855_Users_wangyang_Library_Application Support_typora-user-images_image-20200612141417814.png]
 *  ③。安装nodejs
 *  在mac上，你什么都不用管，直接下一步下一步，安装，到最后几步，是需要密码的，或者是用指纹的
    
    # 2.2.检查是否安装成功 #
    
     *  1.打开终端
     *  输入`node -v`  
        ![\- \[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ptIXofpR-1591943697856)(/Users/wangyang/Library/Application Support/typora-user-images/image-20200612141644304.png)\]][- _img-ptIXofpR-1591943697856_Users_wangyang_Library_Application Support_typora-user-images_image-20200612141644304.png]
     *  说明安装成功了，
     *  2.再`npm -v`  
        ![\- \[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QpsII5hw-1591943697857)(/Users/wangyang/Library/Application Support/typora-user-images/image-20200612141748237.png)\]][- _img-QpsII5hw-1591943697857_Users_wangyang_Library_Application Support_typora-user-images_image-20200612141748237.png]
    
    # 2.3 安装vue的脚手架开发工具 #
 *  1.官网：https://cli.vuejs.org/zh/  
    ![\- \[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ItHnKvPV-1591943697857)(/Users/wangyang/Library/Application Support/typora-user-images/image-20200612141856027.png)\]][- _img-ItHnKvPV-1591943697857_Users_wangyang_Library_Application Support_typora-user-images_image-20200612141856027.png]
 *  我们最好使用yarn
 *  我们先安装yarn : `npm i -g yarn`
 *  然后我们使用`yarn global add @vue/cli`
 *  使用`vue -V`  
    ![\- \[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NggJLfdx-1591943697858)(/Users/wangyang/Library/Application Support/typora-user-images/image-20200612142015691.png)\]][- _img-NggJLfdx-1591943697858_Users_wangyang_Library_Application Support_typora-user-images_image-20200612142015691.png]
 *  说明安装成功了

# 3.创建vue项目 #

## 3.1 vue项目有两种创建方式 ##

*  1.  `vue create 项目名称`
    2.  vue ui 来创建

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200612143647990.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA=,size_16,color_FFFFFF,t_70
[- _img-6HP4CvWu-1591943697855_Users_wangyang_Library_Application Support_typora-user-images_image-20200612141417814.png]: https://img-blog.csdnimg.cn/20200612143702580.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA=,size_16,color_FFFFFF,t_70
[- _img-ptIXofpR-1591943697856_Users_wangyang_Library_Application Support_typora-user-images_image-20200612141644304.png]: https://img-blog.csdnimg.cn/20200612143716583.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA=,size_16,color_FFFFFF,t_70
[- _img-QpsII5hw-1591943697857_Users_wangyang_Library_Application Support_typora-user-images_image-20200612141748237.png]: https://img-blog.csdnimg.cn/20200612143725619.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA=,size_16,color_FFFFFF,t_70
[- _img-ItHnKvPV-1591943697857_Users_wangyang_Library_Application Support_typora-user-images_image-20200612141856027.png]: https://img-blog.csdnimg.cn/20200612143740724.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA=,size_16,color_FFFFFF,t_70
[- _img-NggJLfdx-1591943697858_Users_wangyang_Library_Application Support_typora-user-images_image-20200612142015691.png]: https://img-blog.csdnimg.cn/20200612143754716.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA=,size_16,color_FFFFFF,t_70