1. 安装开发环境

sublime text3 https://www.sublimetext.com

开发前端代码时所用的编辑器，按个人习惯和喜好下载，编译程序直接使用系统终端运行，可以不与编译器有联系。（在此强推最近上手的vscode，也有各种vue和前端开发插件）

1. MacOS环境下可使用brew下载安装
2. 添加Emmet插件（html语法补全）和Vue Syntax Hightlight插件（vue语法高亮）

Node.js https://nodejs.org

Node.js是能够在服务器端运行JavaScript的运行环境，内置npm包管理器，方便管理项目依赖的各种模块，编译代码，可使用node -v和npm -v查看版本，我是用nvm一键安装配套的node和npm（MacOS环境下）

（1）安装nvm
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | bash
（2）安装node及npm（node v8.0.0 (npm v5.0.0)）
nvm install v8.0.0
（3）将镜像源设置为淘宝镜像（不换的话速度慢得要死，大家时间都很宝贵的，通过npm config get registry查看当前镜像地址）
npm config set registry https://registry.npm.taobao.org
（4）node的依赖模块默认在~/.nvm/versions/node/v8.0.0/lib/node_modules下
（5）测试Node和npm安装是否成功，安装Grunt
npm install -g grunt-cli

2. 安装全局模块

vue

npm install -g vue-cli

webpack

webpack是一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理

npm install -g webpack 

PS：若~/.nvm/versions/node/v8.0.0/lib/node_modules中已经有webpack了，说明在安装vue-cli的时候自动安装了，可以跳过这一步

3.新建&&编译&&运行项目

vue init webpack my-project
cd my-project
npm install
npm run dev

然后就可以在浏览器中打开http://localhost:8080看效果了

参考

参考两个github库

1. vue-cli+webpack简单搭建一个vue脚手架
2. 使用vue+webpack+element搭建的后台管理系统模板https://github.com/bailicangdu/vue2-manage