摘要：的雙向數(shù)據(jù)綁定方法我覺得很巧妙我是尤雨溪腦殘粉為什么選美團外賣美團外賣項目估計差不多能夠設計到大部分技術點，不包括服務端渲染作為練習夠用了。平日里我點外賣一直用美團。用多了可能也比較了解美團外賣吧。

很多初學者尤其是像我這樣的公司有且只有一個前端的時候，硬著頭皮去學習一門新框架，周圍無人幫忙，平日里遇到問題只能求助于思否，百度，google。點擊我的個人頭像去看我的提問你們就知道vue小白去學習vue真的很心累。網(wǎng)上搜索的時候搜索出來的都是一些簡單的demo.教學網(wǎng)站上的項目也是一些簡單的單頁面或者稍微多幾個頁面。對我這種新手入門可以，但是拿到手做生產(chǎn)開發(fā)還是遠遠不夠。于是我嘗試寫一個練手型項目，具體頁面有多少我也沒啥數(shù)，用到的技術有啥我也沒啥數(shù)，總之想到哪里開發(fā)到哪里，中間會回來查漏補缺。里面代碼我盡量每句都會有注釋，希望大佬們看到以后不吝賜教。指出錯誤。

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

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

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

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

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

==我手機截圖然后發(fā)電腦上設計的emmmm 就是這么粗糙

├── build                      // 構建相關
├── config                     // 配置相關
├── src                        // 源代碼
│   ├── api                    // 所有請求
│   ├── assets                 // 靜態(tài)資源
│   ├── 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: ""http:// 是否綁定微信號
}
const user = {
  userinfo: Cookies.get("userinfo") || {
    userId: "", // 用戶ID
    name: "", // 用戶名
    avatar: "", // 用戶頭像
    hasaccount: "", // 是否有賬號密碼，可能有手機號驗證碼直接登錄未設置賬號密碼
    mobile: "", // 手機號
    wx: ""http:// 是否綁定微信號
  },
  mutations: {
    SET_USERINFO: (state, code) => {
      state.userinfo = {...code}
      // 修改對象或者數(shù)組的時候養(yǎng)成用展開運算符的習慣
    }
  },
  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：單一狀態(tài)機，所有需要在每個頁面共享的數(shù)據(jù)都存放在這里，不如上面代碼里的用戶信息
getters:拿取狀態(tài)機中對應的狀態(tài)。（查）
mutations:制定修改數(shù)據(jù)的規(guī)則。
Action：進行修改數(shù)據(jù)，與mutations匹配，異步操作放在這里。