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

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

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

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

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

頁(yè)面代碼風(fēng)格以及實(shí)現(xiàn)方式參考的是這里 vue-admin(入門vue我是對(duì)著這個(gè)學(xué)的)

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

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

├── build                      // 構(gòu)建相關(guān)
├── config                     // 配置相關(guān)
├── src                        // 源代碼
│   ├── api                    // 所有請(qǐng)求
│   ├── assets                 // 靜態(tài)資源
│   ├── components             // 全局公用組件
│   ├── router                 // 路由
│   ├── store                  // 全局 store管理
│   ├── utils                  // 全局公用方法
│   ├── pages                  // 頁(yè)面
│   ├── App.vue                // 入口頁(yè)面               
│   └── main.js                // 入口文件 
├── static                     // 未用到 
├── .babelrc                   // babel-loader 配置
├── .eslintrc.js               // eslint 配置項(xiàng)
├── .gitignore                 // git 忽略項(xiàng)
├── index.html                 // html模板
├── .postcssrc                 // postcss配置地址
└── package.json               // package.json

今天第一天我只把項(xiàng)目的腳手架搭了一半。路由還沒有寫。考慮到第一個(gè)頁(yè)面就需要使用store。所以我先寫了store
涉及到兩個(gè)文件夾

├── 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: "", // 是否有賬號(hào)密碼，可能有手機(jī)號(hào)驗(yàn)證碼直接登錄未設(shè)置賬號(hào)密碼
  mobile: "", // 手機(jī)號(hào)
  wx: ""http:// 是否綁定微信號(hào)
}
const user = {
  userinfo: Cookies.get("userinfo") || {
    userId: "", // 用戶ID
    name: "", // 用戶名
    avatar: "", // 用戶頭像
    hasaccount: "", // 是否有賬號(hào)密碼，可能有手機(jī)號(hào)驗(yàn)證碼直接登錄未設(shè)置賬號(hào)密碼
    mobile: "", // 手機(jī)號(hào)
    wx: ""http:// 是否綁定微信號(hào)
  },
  mutations: {
    SET_USERINFO: (state, code) => {
      state.userinfo = {...code}
      // 修改對(duì)象或者數(shù)組的時(shí)候養(yǎng)成用展開運(yùn)算符的習(xí)慣
    }
  },
  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簡(jiǎn)單很多。
分四部分。
state：?jiǎn)我粻顟B(tài)機(jī)，所有需要在每個(gè)頁(yè)面共享的數(shù)據(jù)都存放在這里，不如上面代碼里的用戶信息
getters:拿取狀態(tài)機(jī)中對(duì)應(yīng)的狀態(tài)。（查）
mutations:制定修改數(shù)據(jù)的規(guī)則。
Action：進(jìn)行修改數(shù)據(jù)，與mutations匹配，異步操作放在這里。