Vue小项目二手书商城：（一）准备工作、组件和路由

本项目基于vue2.5.2，与低版本部分不同之处会在（五）参考资料中提出

完整程序：https://github.com/M-M-Monica/bukesi

实现内容：

• 资源准备（mock数据）
• 组件拆分components（header、footer、literature、science、humanity）
• 路由router（router-link、router-view）

一.准备工作

1.首先开始一个项目第一步是准备工作。

2.准备工作包括需求分析和项目资源准备两大步。

• 需求分析就是思考想做一个关于什么的项目，包括什么功能，主要有哪些页面，这些页面要怎么呈现。
  • 我现在想做一个二手书商城，要包括主页，主页有三个路由引到不同分类的图书页面下。还要有图书详情页，里面有图书介绍和旧书详细页面，这里可以选择加入购物车。每件商品加入购物车之后就不能再添加，因为每件商品只有一件，除非把购物车的商品删掉，就可以继续添加这件商品。
  • 一般一个完整的商城项目包括主页，商品详情页，登录页，购物车页，个人信息页，订单页，但是我现在这里只做了简单的主页，图书详情页，购物车页还有许多不足。这里可以决定想要用什么技术栈了。
• 项目资源准备顾名思义就是准备项目需要的图片，设计，数据，等等。
  • 如果想做一个全栈项目，可以学习一下MongoDB+Node.js，MongoDB做数据库，用Node.js搭建一个静态服务器。
  • 这里我只做一个简单的前端小项目，所以要准备一些mock数据。也就是准备一个json文件，放项目要用的数据。建一个data.json文件，里面放这些数据，分文学、科学、人文三大类，每一类里面有书名、作者、价格、介绍、实物图片（图片我都放在static文件夹下，也可以建文件夹放对应组件和它所需要的图片资源）和详情页是否展示默认值。

二.拆分组件---基本页面骨架编写（也就是html、css内容）

header

footer

1.这里就可以拆分为几个组件了。我把下面这几部分做成组件，放在components文件夹中。

2.然后在App.vue中引入，这里只在App.vue中引入NavHeader和NavFooter组件，其他组件以路由方式展现。

三.使用路由Vue-router（点击主页左侧的路由会在右侧导向不同内容）

1.要使用路由可以安装一下vue-router，我这里是使用vue-cli时就选择安装了，此处不赘述。

2.router文件夹下有一个index.js文件，文件这样写：

3.引入三个组件，path是我访问它们的路径。然后在App.vue中这样写：

4.写样式的时候把router-link当成a标签写就可以了，里面：

5.我们写完a标签，你想把内容展现在哪就在那这样写：

6.点击不同的路由，呈现不同的内容，地址路径也不一样：

• Vue小项目二手书商城：（二）axios前后端数据交互