vue2練習之仿美團外賣開發（一）

前言

不少初學者尤爲是像我這樣的公司有且只有一個前端的時候，硬着頭皮去學習一門新框架，周圍無人幫忙，平日裏遇到問題只能求助於思否，百度，google。點擊個人我的頭像去看個人提問大家就知道vue小白去學習vue真的很心累。網上搜索的時候搜索出來的都是一些簡單的demo.教學網站上的項目也是一些簡單的單頁面或者稍微多幾個頁面。對我這種新手入門能夠，可是拿到手作生產開發仍是遠遠不夠。因而我嘗試寫一個練手型項目，具體頁面有多少我也沒啥數，用到的技術有啥我也沒啥數，總之想到哪裏開發到哪裏，中間會回來查漏補缺。裏面代碼我儘可能每句都會有註釋，但願大佬們看到之後不吝賜教。指出錯誤。

爲何選擇VUE

1學習曲線平滑，沒有NG以及react的學習起來難度那麼大。
2setget的雙向數據綁定方法我以爲很巧妙
3我是尤雨溪腦殘粉

爲何選美團外賣

美團外賣項目估計差很少可以設計到大部分VUE技術點，（不包括服務端渲染）做爲練習夠用了。固然真正的外賣開發須要的東西遠不止這些，個人目標僅僅是完成一個粗糙的框架。用做練習。
平日裏我點外賣一直用美團。用多了可能也比較瞭解美團外賣吧。emmmm 我就是喜歡美團外賣==

技術棧

其實我也不知道我會用到哪些東西,是基於vuecli作的擴展 後面再增長的話會回來修改
vue2 + vuex + vue-router +axios+ webpack + ES6+flex+stylus+ vw + svg

參考代碼

頁面代碼風格以及實現方式參考的是這裏 vue-admin(入門vue我是對着這個學的)

爲何使用VW佈局以及2X3X圖

人都是往前走的，不去嘗試新的東西怎麼進步呢。我以爲VW挺好用的因而我就用了，我的練手不會考慮適配呀兼容性的問題，喜歡就去用啦。
VW如何在vue中使用，以及1px等比例等解決方案能夠點這裏
2X3X圖 我選擇直接3X圖==偷懶了。抱歉

關於設計稿

==我手機截圖而後發電腦上設計的emmmm 就是這麼粗糙

目錄結構

├── build                      // 構建相關
├── config                     // 配置相關
├── src                        // 源代碼
│   ├── api                    // 全部請求
│   ├── assets                 // 靜態資源
│   ├── components             // 全局公用組件
│   ├── router                 // 路由
│   ├── store                  // 全局 store管理
│   ├── utils                  // 全局公用方法
│   ├── pages                  // 頁面
│   ├── App.vue                // 入口頁面               
│   └── main.js                // 入口文件 
├── static                     // 未用到 
├── .babelrc                   // babel-loader 配置
├── .eslintrc.js               // eslint 配置項
├── .gitignore                 // git 忽略項
├── index.html                 // html模板
├── .postcssrc                 // postcss配置地址
└── package.json               // package.json

今天第一天我只把項目的腳手架搭了一半。路由尚未寫。考慮到第一個頁面就須要使用store。因此我先寫了store
涉及到兩個文件夾

├── api                                     
│   └── login.js
├── utils
│   └── request.js    
├── store
├── ├── modules    
│   │     └── user.js  
├── ├── getters.js
│   └── index.js

主要代碼

import { loginByUsername, logout, loginByMobile } from '@/api/login'
import Cookies from 'js-cookie'

const emptyuser = {
  userId: '', // 用戶ID
  name: '', // 用戶名
  avatar: '', // 用戶頭像
  hasaccount: '', // 是否有帳號密碼，可能有手機號驗證碼直接登陸未設置帳號密碼
  mobile: '', // 手機號
  wx: ''// 是否綁定微信號
}
const user = {
  userinfo: Cookies.get('userinfo') || {
    userId: '', // 用戶ID
    name: '', // 用戶名
    avatar: '', // 用戶頭像
    hasaccount: '', // 是否有帳號密碼，可能有手機號驗證碼直接登陸未設置帳號密碼
    mobile: '', // 手機號
    wx: ''// 是否綁定微信號
  },
  mutations: {
    SET_USERINFO: (state, code) => {
      state.userinfo = {...code}
      // 修改對象或者數組的時候養成用展開運算符的習慣
    }
  },
  actions: {
    // 用戶名登陸
    LoginByUsername ({ commit }, userInfo) {
      return new Promise((resolve, reject) => {
        loginByUsername(userInfo.username, userInfo.password).then(response => {
          const data = response.data
          commit('SET_USERINFO', data.userinfo)
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },
    LoginByMobile ({ commit }, userInfo) {
      return new Promise((resolve, reject) => {
        loginByMobile(userInfo.mobile, userInfo.code).then(response => {
          const data = response.data
          commit('SET_USERINFO', data.token)
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },
    // 登出
    LogOut ({ commit, state }) {
      return new Promise((resolve, reject) => {
        logout(state.userId).then(() => {
          commit('SET_USERINFO', emptyuser)
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    }
  }
}

export default user

vue的store相比較redux簡單不少。
分四部分。
state：單一狀態機，全部須要在每一個頁面共享的數據都存放在這裏，不如上面代碼裏的用戶信息
getters:拿取狀態機中對應的狀態。（查）
mutations:制定修改數據的規則。
Action：進行修改數據，與mutations匹配，異步操做放在這裏。