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先後端數據交互