Vue練手專案(包含typescript版本)

lznism發表於2018-04-18
VueTypeScript

本專案的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. 採用路由懶載入

說明

本專案模仿下廚房構建

相關文章