FungLeo
FungLeo

Vue2+VueRouter2+webpack 构建项目实战（三）配置路由，整俩页面先

Vue2+VueRouter2+webpack 构建项目实战（三）配置路由，整俩页面先

2017年8月补充

2016年，我写了一系列的 VUE 入门教程，当时写这一系列博文的时候，我也只是一个菜鸟，甚至在写的过程中关闭了代码审查，否则通不过校验。

本来写这一系列的博文只是为了给自己看的，但没想到的是，这系列博文的点击量超过了2万以上，搜索引擎的排名也是非常理想，这让我诚惶诚恐，生怕我写的博文有所纰漏，误人子弟。

再者，这一年的发展，VUE 项目快速迭代，看着我一年前写的博文，很可能各种提示已经发生改变，对照着过时的资料，非常可能导致新手在学习的过程中产生不必要的困扰。

因此，本人决定，重写这个系列的博文，力求以简明、清晰、准确的图文以及代码描述，配合 github 的项目开源代码，给各位 VUE 新手提供一个高质量的入门文案。

以下为我写的博文：

  1. Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版（一）基础知识概述
  2. Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版（二）安装 nodejs 环境以及 vue-cli 构建初始项目
  3. Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版（三）认识项目所有文件
  4. Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版（四）调整 App.vue 和 router 路由
  5. Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版（五）配置 Axios api 接口调用文件
  6. Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版（六）将接口用 webpack 代理到本地
  7. Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版（七）初识 *.vue 文件
  8. Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版（八）渲染一个列表出来先
  9. Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版（九）再把内容页面渲染出来
  10. Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版（十）打包项目并发布到子目录
  11. Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版（十一）阶段性小结

以下为原文

目录索引

《Vue2+VueRouter2+webpack 构建项目实战（一）准备工作》

《Vue2+VueRouter2+webpack 构建项目实战（二）目录以及文件结构》

《Vue2+VueRouter2+webpack 构建项目实战（三）配置路由，整俩页面先》

《Vue2+VueRouter2+webpack 构建项目实战（四）接通api，先渲染个列表》

《Vue2+VueRouter2+webpack 构建项目实战（五）配置子路由》

制作模板文件

通过前面的两篇博文的学习，我们已经建立好了一个项目。问题是，我们还没有开始制作页面。下面，我们要来做页面了。

我们还是利用 http://cnodejs.org/api 这里公开的api来做项目。不过本章节不涉及调用接口等内容。这里，我们假设我们的项目是做俩页面，一个列表页面，一个内容页面。列表页面有分页等，内容页面展示。

因此，我们需要两个模板文件。

我们在src/page目录下面新建两个文件，分别是index.vue和content.vue

代码分别是

//index.vue