vue开发环境搭建步骤-Mac版

淡淡的烟草味﹌ 2022-02-15 09:11 354阅读 0赞

### 文章目录 ###

*   *   *  一、nodejs下载
         *  二、安装淘宝镜像npm
         *  三、安装webpack、webpack-cli脚手架
         *  四、安装vue-cli脚手架
         *  五、新建vue项目

### 一、nodejs下载 ###

**1、nodejs下载**  
下载官网： [http://nodejs.cn/][http_nodejs.cn]  
点击macOS安装包，点击保存文件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqdTIy_size_16_color_FFFFFF_t_70]![在这里插入图片描述][20190424110504809.png]  
**2、验证nodejs是否安装成功**  
终端输入node -v，如下图所示，说明nodejs安装成功

node -v

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

### 二、安装淘宝镜像npm ###

1、终端输入这行，安装淘宝镜像npm

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

![在这里插入图片描述][20190424114029964.png]  
2、输入cnpm -v，查看安装的淘宝镜像,发现报错，是说我们需要改变文件的权限。  
我们将报错的这行提示命令运行下，  
然后重新运行镜像安装命令，  
安装完成后查看镜像cnpm -v，发现没有报错了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqdTIy_size_16_color_FFFFFF_t_70 1]

### 三、安装webpack、webpack-cli脚手架 ###

sudo cnpm install -g webpack

sudo cnpm install -g webpack-cli

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

### 四、安装vue-cli脚手架 ###

安装vue-cli脚手架

sudo cnpm install -g vue-cli

输入vue，返回如下信息，说明安装成功

vue

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

### 五、新建vue项目 ###

**1、项目初始化**  
创建一个vue项目，项目名为vuetest1，做如下初始化。

vue init webpack vuetest1

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqdTIy_size_16_color_FFFFFF_t_70 4]**2、切到项目目录下，运行项目**

cd vuetest1

cnpm run dev

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqdTIy_size_16_color_FFFFFF_t_70 5]  
用热加载的方式启动项目，修改完代码后就不用手动刷新浏览器就能实时看到修改后的效果了

**3、运行结果：**  
在浏览器中访问：[http://localhost:8080][http_localhost_8080]，有如下结果，说明这个vue项目就新建好了，这个是vue默认的模板。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqdTIy_size_16_color_FFFFFF_t_70 6]

[http_nodejs.cn]: http://nodejs.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqdTIy_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190424110446725.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqdTIy,size_16,color_FFFFFF,t_70
[20190424110504809.png]: /images/20220215/523beb80f54043bd8673b8a3a71a27eb.png
[20190424111318486.png]: /images/20220215/1f5ddac5247740f099de5a3ec8f14b48.png
[20190424114029964.png]: /images/20220215/3328fb92624b488e84edaf9ed2ddca23.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqdTIy_size_16_color_FFFFFF_t_70 1]: /images/20220215/60de111601c64e3eaa38a4b55483002f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqdTIy_size_16_color_FFFFFF_t_70 2]: /images/20220215/b5b9ebcb048f4936aabc65f1d3fd848f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqdTIy_size_16_color_FFFFFF_t_70 3]: /images/20220215/40269e8e3cd148e8bdc643283a78a4e5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqdTIy_size_16_color_FFFFFF_t_70 4]: /images/20220215/fe839383e0f5471a9fa7bdd267dae94a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqdTIy_size_16_color_FFFFFF_t_70 5]: /images/20220215/b510e1a870e346bba3c660be1574c783.png
[http_localhost_8080]: http://localhost:8080
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqdTIy_size_16_color_FFFFFF_t_70 6]: /images/20220215/442e36d1f9b34b88b2b09204c590606c.png