使用vue-cli脚手架工具搭建vue工程项目以及配置路由

vue-cli是用node编写的命令行工具，我们需要进行全局安装。打开命令行终端，输入如下命令：

$ npm install -g vue-cli

 这里使用的是npm，为了开发的便利，推荐安装cnpm，这样运行指令会更迅速，安装命令如下：

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

 注意：确保node的版本为4.x、5.x及以上。

我们可以使用vue-cli来快速生成一个基于Webpack构建的项目，打开命令行终端，通过cd指令定位到指定的路径下,输入如下命令：

$ vue init webpack vueExamp

 执行命令后，会有一些命令行交互，我们可以初始化一些项目信息，如下图所示：

项目初始化完成以后，会在当前目录下生成如下目录结构，进入vueExamp目录，安装项目的依赖，执行如下命令：

$ npm install

 依赖安装完成以后，来了解一下项目的目录结构：

启动项目，执行如下命令：

$ npm run dev

 如果运行中报如下错误：Resolve error: unable to load resolver "node"

执行如下命令：

$ cnpm  install --save-dev eslint-import-resolver-node

 默认端口号是8080，打开浏览器，输入http://localhost:8080,生成的页面如下图所示:

这样，最基本的框架就已经搭建完毕了，接下来就是配置路由以及编写组件了。