vue girls

vue-girls

本項目是基於vue2最新實戰項目,實現了移動端使用最多的無限滾動，圖片加載，左右滑動，等等。

###首先

---

• 本專案地址github地址

專案技術架構

---

• vue-cli
• vue
• vue-resource
• vue-router
• vuex
• vue-awesome-swiper
• vue-infinite-scroll
• stylus
• webpack

###上圖

• 瀑布流佈局，無限滾動，圖片懶加載

• 左右滑動，左右切換

###安裝

---

專案地址：（ git clone ）

git clone https://github.com/xiaoyaopai/vue-Meizi.git

透過npm安裝本機服務第三方依賴模組(需要已安裝Node.js)

 npm install

啟動服務(http://localhost:9090)

 npm run dev

發布程式碼

 npm run build

安裝注意

安裝vue-cli

 npm install -g vue-cli

安裝vue-cli eslint

 npm install -g eslint

安裝依賴friendly-errors-webpack-plugin

 npm install friendly-errors-webpack-plugin --save-dev

###目錄結構

---

├── build // 建置服務與webpack配置├── config // 專案不同環境的設定├── dist // 專案build目錄├── index.html // 專案入口檔├── package.json //專案設定檔├── src // 生產目錄│ ├── assets // 圖片資源│ ├── common // 公共的css js資源│ ├── components // 各種元件│ ├── App.vue // 主頁 
│ ├── vuex // vuex狀態管理器│ ├── router.js // 路由設定器│ └── main.js // Webpack 預先編譯入口

###實現的功能

---

• 瀑布流佈局
• 無限滾動
• 側邊導航
• 圖片懶加載
• 左右滑動切換
• 等等