vue2仿美團外賣的項目開發過程

來源：懂視網責編：小采時間：2020-11-27 19:33:14

vue2仿美團外賣的項目開發過程

vue2仿美團外賣的項目開發過程:本篇文章分享給大家的內容是關于vue2仿美團外賣的項目開發過程，內容很詳細，接下來我們就來看看具體的內容，希望可以幫助到大家。前言很多初學者尤其是像我這樣的公司有且只有一個前端的時候，硬著頭皮去學習一門新框架，周圍無人幫忙，平日里遇到問題只能求

推薦度：

點擊下載本文 文檔為doc格式

導讀vue2仿美團外賣的項目開發過程:本篇文章分享給大家的內容是關于vue2仿美團外賣的項目開發過程，內容很詳細，接下來我們就來看看具體的內容，希望可以幫助到大家。前言很多初學者尤其是像我這樣的公司有且只有一個前端的時候，硬著頭皮去學習一門新框架，周圍無人幫忙，平日里遇到問題只能求

本篇文章分享給大家的內容是關于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匹配，異步操作放在這里。