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先后端数据交互