圖書購物商城
目錄：
- 項目介紹
- 頁面展示
- 項目流程
- 源代碼分享
項目介紹
一、簡介
基于vue.js開發的前端項目，與背景提供資料的伺服器是分離的，此購物網站實作基本的增删查改，購物車結算功能，購物車添加删除，使用者注冊功能及登入退出功能，商品搜尋功能，分頁。
二、項目結構
components檔案夾存放一般的小元件元件
view檔案夾存頁面級元件
router檔案夾存放相關路由配置
store檔案夾是vueX狀态管理功能的相關目錄
main.js項目的入口檔案
App.vue項目根元件
三、主要元件介紹
Header.vue 頭部元件
HeaderSearch.vue 頭部搜尋框元件
HeaderCart.vue 頭部購物車元件
Menus.vue菜單元件
Home.vue 首頁元件
HomeCartgory.vue 圖書分類元件
HomeScollPic.vue 首頁輪播圖元件
HomeBooksHot.vue 熱門推薦元件
BookListItem.vue 商品清單元件
Loading.vue 加載提示元件
Books.vue 搜尋圖書元件
BookCommenntListItem.vue 圖書評價元件
ShoppingCart.vue購物車元件
UserRegister.vue 使用者祖冊元件
UserLogin.vue 使用者登入元件
頁面展示
首頁：
注冊界面
登入頁面
搜尋頁面
圖書詳情頁
購物車
評價
新書
項目流程
1.腳手架安裝 （全局）
npm install -g @vue/cli
2.建立項目（cd 進要存放項目的目錄）
vue create 項目名
之後會彈出預設，第一個為預設選項，選擇第二個就是手動對項目進行配置（此處選擇第二）
| 選項 | 說明 |
|---|---|
| Babel | 轉碼器，用于将es6轉為es5代碼 |
| TypeScript | javascript的超集，可以編譯成純javascript |
| Progressive Web App(PWA)Support | 支援漸進式web應用程式 |
| Router | 路由 |
| vueX | vue的狀态管理 |
| CSS Pre-processors | css預處理器 |
| Linter /Formatter | 代碼分格檢查（如EsLint） |
| Unit Testing | 單元測試 |
| E2E testing | 端對端測試 |
此項目勾選（空格鍵）
Babel ,Router, vueX, Linter/Formatter
三、安裝配置axios
安裝axios 和vue axios插件
npm install axions vue-axios -S
在vue.config.js檔案中進行配置
四、編寫入口檔案（main.js）
五、修改App.vue
六、編寫相關元件（不做贅述）
七.過濾器（負責價格格式化問題）
filter.js
存放至src目錄下的utils檔案夾
utils目錄存放一些有用的工具函數庫js檔案，有較多的過濾器也可以考慮單獨一個檔案夾
八、前端路由的配置（router/index.js）
九、定義Vuex資料，在store目錄下新增modules目錄。
cart.js
user.js
修改store的index.js
源代碼：
百度雲