Vue練手項目(包含typescript版本)

本項目的git倉庫 https://github.com/lznism/xiachufang-vue
對應的使用typescript實現的版本地址 https://github.com/lznism/xiachufang-vue-typescript
項目的後臺地址 https://github.com/lznism/xcf-server
本實例對初學者友好，歡迎star，交流學習，有任何問題均可以issue交流~

技術棧

本項目採用vue+vuex+vue-router技術棧，網絡請求採用axios，爲業餘前端練手項目，項目框架採用vue-cli構建

項目使用

本項目須要首先運行後臺，先將總體項目克隆下來，而後運行npm start

git clone https://github.com/lznism/xcf-server.git

注意，我這裏採用了nodemon這個工具，若是沒有這個包，須要先安裝npm i nodemon -g

後端項目默認跑在3000端口上，前端本地環境默認跑在8080端口上，所以這裏涉及到跨域的狀況，我在config/index.js的proxyTable中

項目文件夾介紹

assets 項目的靜態文件目錄
components 通用組件目錄
router 項目的路由目錄
store vuex目錄
utils 工具方法目錄
views 視圖目錄
App.vue 項目的根組件
main.js 項目的入口文件

項目技術點

1. 引入fastclick，避免300ms延時
2. 採用rem佈局
3. 採用圖片懶加載 vue-lazyload
4. 加入vuex，本項目中使用vuex只是爲了練習，vuex並非處處都合適，vuex的使用場景1.須要實現組件通訊，2.狀態共享
5. 採用路由懶加載

說明

本項目模仿下廚房構建