使用vue-cli构建Vue项目

vue-cli是一个官方出品的命令行工具，专门为Vue提供开箱即用的构建工具配置。拥有包括热重载、保存时静态检查以及可用于生产环节的构建配置的项目

第一步：安装node.js环境依赖

这部分不多说，网上大把的教程。直接上node.js的官方网站下载安装即可。新版本node.js默认自带npm。
node.js官方网站

第二步：安装Vue-cli官方命令行工具

能够正常使用npm之后即可进行vue-cli的安装。

# 全局安装 vue-cli
$ npm install -g vue-cli

安装vue-cli后找不到vue命令的问题【MAC环境】

因为英语不好，也看不懂报错的是啥。。。所以网上找了很久才在知乎上找个一个相关的问题，说是需要配置环境变量，过程一看就繁琐的很。。。

然后我猜测是不是由于权限的问题导致的，就取巧尝试的加上了sudo语句，成功解决问题。

# 全局安装 vue-cli
$ sudo npm install -g vue-cli

第三步：创建一个基于“webpack”模板的新项目

直接执行以下创建命令，然后填写项目相关信息，或者直接一路回车确认就行。

# 创建一个基于 "webpack" 模板的新项目
$ vue init webpack my-project

第四步：安装依赖

直接进入项目根目录，然后安装npm依赖

# 进入项目根目录
$ cd my-project
# 安装依赖
$ npm install

第五步：运行项目，Hello World!

成功安装依赖后即可启动项目，在命令行执行以下命令

$ npm run dev

启动成功，系统会创建一个本地测试环境，在浏览器中输入这个地址访问即可。

http://localhost:8080

如果端口被占用，这个地址可能是其他的地址。这时可以直接在命令行终端找到这个地址