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

一、nodejs下载

1、nodejs下载
下载官网： http://nodejs.cn/
点击macOS安装包，点击保存文件

2、验证nodejs是否安装成功
终端输入node -v，如下图所示，说明nodejs安装成功

node -v

二、安装淘宝镜像npm

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

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

2、输入cnpm -v，查看安装的淘宝镜像,发现报错，是说我们需要改变文件的权限。
我们将报错的这行提示命令运行下，
然后重新运行镜像安装命令，
安装完成后查看镜像cnpm -v，发现没有报错了。

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

sudo cnpm install -g webpack

sudo cnpm install -g webpack-cli

四、安装vue-cli脚手架

安装vue-cli脚手架

sudo cnpm install -g vue-cli

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

vue

五、新建vue项目

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

vue init webpack vuetest1

2、切到项目目录下，运行项目

cd vuetest1 

cnpm run dev

用热加载的方式启动项目，修改完代码后就不用手动刷新浏览器就能实时看到修改后的效果了

3、运行结果：
在浏览器中访问：http://localhost:8080，有如下结果，说明这个vue项目就新建好了，这个是vue默认的模板。