手把手教你用vue-cli、webpack、vue-router、vue-resource构建单页应用（SPA）

vue-cli webpack vue-router vue-resource

vue-cli:一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目
webpack:是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源
vue-router:SPA单页应用必备路由模块（下面详细介绍）
vue-resource:SPA单页应用资源访问模块,类似于Jquery中的$.ajax

1.搭建环境

搭建环境之前，你需要在本地安装node,npm是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖)等，会随着node的安装而自动安装。但因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常。所以国内淘宝团队在npm的基础上，为我们提供了强大的cnpm包管理工具。

安装cnpm：npm install cnpm -g --registr=https://registry.npm.taobao.org

测试cnpm是否安装：cnpm -v，下图表示安装成功。

手把手教你用vue-cli、webpack、vue-router、vue-resource构建单页应用（SPA）_第1张图片

cnpm安装

cnpm和npm的用法一致，但凡用到npm的地方，使用cnpm代替即可，下载速度会提升一个档次！

接下来执行以下命令：

cnpm install -g webpack

手把手教你用vue-cli、webpack、vue-router、vue-resource构建单页应用（SPA）_第2张图片

全局安装webpack

cnpm install -g vue-cli

手把手教你用vue-cli、webpack、vue-router、vue-resource构建单页应用（SPA）_第3张图片

全局安装vue脚手架

进入目标目录，执行vue init webpack myVueStudy

手把手教你用vue-cli、webpack、vue-router、vue-resource构建单页应用（SPA）_第4张图片

创建vue项目

cnpm install

手把手教你用vue-cli、webpack、vue-router、vue-resource构建单页应用（SPA）_第5张图片

安装项目相关依赖工具

cnpm run dev

手把手教你用vue-cli、webpack、vue-router、vue-resource构建单页应用（SPA）_第6张图片

启动项目

大功告成，项目已成功启动，浏览器会自动为我们打开一个页面，这就是我们将要开发的项目主页面。见下图

手把手教你用vue-cli、webpack、vue-router、vue-resource构建单页应用（SPA）_第7张图片

项目自动生成页面

2.项目文件结构

打开我们创建的myVueStudy项目，项目目录如下

手把手教你用vue-cli、webpack、vue-router、vue-resource构建单页应用（SPA）_第8张图片

myVueStudy项目目录

src目录结构如下

手把手教你用vue-cli、webpack、vue-router、vue-resource构建单页应用（SPA）_第9张图片

src结构目录

分别看下app.vue和main.js两个重要文件

app.vue

手把手教你用vue-cli、webpack、vue-router、vue-resource构建单页应用（SPA）_第11张图片

main.js

3.开始开发

vue脚手架为我们构成的vue.app文件中的img和router-view,没啥卵用，删除即可。我们在该文件中引入三个一级路由，定义一些样式，我们在src目录下面创建一个pages目录，用于创建自定义组件（一个个页面）。static目录下面创建一个css目录和data目录，分别用来存放css样式和数据。文件目录如下