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交流~html

技術棧

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

項目使用

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

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

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

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

項目文件夾介紹

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. 採用路由懶加載

說明

本項目模仿下廚房構建git

相關文章
相關標籤/搜索