Meituan 테이크아웃을 모방한 vue2의 프로젝트 개발 프로세스

이 글에서 공유한 내용은 Meituan 테이크아웃을 모방한 vue2의 프로젝트 개발 과정에 관한 것입니다. 다음으로 구체적인 내용을 살펴보겠습니다.

머리말

많은 초보자, 특히 저와 같은 회사에는 프론트엔드가 하나뿐인 경우, 주중에 문제가 발생하면 도움을 줄 수 있는 사람이 주변에 없기 때문에 서둘러 새로운 프레임워크를 배웁니다. 시푸(Sifou), 구글. 내 프로필 사진을 클릭하면 내 질문을 볼 수 있습니다. Vue 초보자가 Vue를 배우는 것이 정말 피곤하다는 것을 알게 될 것입니다. 온라인으로 검색해 보니 교육용 웹사이트의 프로젝트도 단순한 한 페이지이거나 몇 페이지가 조금 넘는 간단한 데모뿐이었습니다. 저 같은 초보자가 시작하는 것은 괜찮지만, 프로덕션 개발을 시작하기에는 아직 멀었습니다. 그래서 핸드트레이닝 프로젝트를 작성하려고 했는데요, 구체적인 페이지가 몇 개인지도 모르고, 얼마나 많은 기술이 사용되었는지도 몰랐습니다. 요컨대 생각나는 대로 개발해서 돌아왔습니다. 누락된 부분을 확인하고 부족한 부분을 채우는 것입니다. 나는 코드 안의 모든 문장에 대해 최선을 다해 의견을 제시할 것입니다. 그것을 읽은 후 큰 분들이 나에게 조언을 해주시기를 바랍니다. 오류를 지적하세요.

VUE를 선택하는 이유

1 학습 곡선이 매끄럽고, NG만큼 배우고 반응하는 것도 어렵지 않습니다.
2 setget의 양방향 데이터 바인딩 방식이 참 영리한 것 같아요
3 저는 You Yuxi의 팬이에요

미인대회는 왜 테이크아웃 음식을 하나요

메이투안 테이크아웃 프로젝트는 거의 대부분의 음식을 디자인할 수 있을 것으로 추정됩니다. VUE 기술 포인트(서버 측 렌더링 제외)는 연습으로 충분합니다. 물론 실제 테이크아웃 개발에는 이보다 훨씬 더 많은 것이 필요합니다. 내 목표는 단지 ​​대략적인 프레임워크를 완성하는 것입니다. 운동으로 사용됩니다.
평일에는 테이크아웃 주문시 항상 메이투안을 이용합니다. 좀 더 사용해보시면 메이투안 테이크아웃이 익숙하실 겁니다. 으음 그냥 메이투안 테이크아웃이 좋아요==

Technology stack

사실 뭘 쓸지 모르겠어요. 나중에 추가하면 다시 수정하겠습니다
vue2 + vuex + vue-router +axios+ webpack + ES6+flex+stylus+ vw + svg

참조 코드

페이지 코드 스타일 및 구현 방법은 vue-admin을 참조합니다. (vue를 시작할 때 배웠습니다.)

VW를 사용하는 이유 레이아웃과 2X3X 다이어그램

모두가 앞으로 나아가고 있어요. 새로운 것을 시도하지 않으면 어떻게 발전할 수 있을까요? 폭스바겐은 사용하기 매우 편한 것 같아서 개인적으로 적응이나 호환성 문제는 생각하지 않고 그냥 사용합니다.
Vue에서 VW를 사용하는 방법과 1px 균등 비율과 같은 솔루션은 여기를 클릭하세요.
2X3X 사진 제가 직접 선택한 3X 사진==게으르다. 죄송합니다

디자인 시안 관련

==폰으로 캡쳐해서 컴퓨터로 보내드렸어요 으으으으으으으으으어어어어어어어어어어어어

디렉토리 구조

├── 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

오늘 첫날 프로젝트의 절반밖에 못 만들었어요 발판. 경로는 아직 작성되지 않았습니다. 첫 번째 페이지가 상점을 사용해야 한다는 점을 고려하면. 그래서 스토어를 먼저 작성했습니다
두 개의 폴더를 포함하는

├── 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의 스토어는 redux보다 훨씬 간단합니다.
네 부분으로 나누어져 있습니다.
state: 각 페이지에서 공유해야 하는 모든 데이터가 여기에 저장됩니다.
getters: 상태 머신에서 해당 상태를 가져옵니다. (확인)
돌연변이: 데이터 수정을 위한 규칙을 개발합니다.
작업: 데이터 수정 및 돌연변이 일치가 여기에 배치됩니다.

관련 권장 사항:

Vue와 axios의 인터페이스 관리를 통합하는 방법

Vue의 하위 구성 요소는 상위 구성 요소의 가치를 어떻게 얻나요? (소품 구현)

위 내용은 Meituan 테이크아웃을 모방한 vue2의 프로젝트 개발 프로세스의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!