首頁 > 文章 > web前端 > vue2仿美團外送的專案開發過程

vue2仿美團外送的專案開發過程

不言原創: 2018-07-25 11:10:002207瀏覽

這篇文章分享給大家的內容是關於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匹配，非同步操作放在這裡。