Der Projektentwicklungsprozess von vue2 imitiert Meituan zum Mitnehmen

Der Inhalt, der in diesem Artikel mit Ihnen geteilt wird, befasst sich mit dem Projektentwicklungsprozess von vue2, der Meituan zum Mitnehmen nachahmt. Als nächstes werfen wir einen Blick auf die spezifischen Inhalte, in der Hoffnung, allen zu helfen.

Vorwort

Viele Anfänger, insbesondere wenn ein Unternehmen wie meines nur ein einziges Frontend hat, beißen in den sauren Apfel und lernen ein neues Framework, ohne dass jemand in der Nähe ist, der ihnen hilft , können Sie sich nur an Sifu, Baidu und Google wenden. Klicken Sie auf mein Profilbild, um meine Fragen zu sehen. Sie werden wissen, dass es für Vue-Neulinge wirklich anstrengend ist, Vue zu lernen. Bei der Online-Suche habe ich nur einfache Demos gefunden. Die Projekte auf der Lehr-Website bestanden ebenfalls aus einfachen Einzelseiten oder etwas mehr als ein paar Seiten. Für einen Neuling wie mich ist der Einstieg in Ordnung, aber für den Einstieg in die Produktionsentwicklung reicht es noch lange nicht. Also habe ich versucht, ein Handtrainingsprojekt zu schreiben, und ich wusste nicht, wie viele Technologien verwendet wurden. Kurz gesagt, ich habe alles entwickelt, was mir einfiel, und ich würde zurückkommen um nach Auslassungen zu suchen und die Lücken zu schließen. Ich werde mein Bestes geben, um jeden Satz des darin enthaltenen Codes zu kommentieren. Ich hoffe, dass die Großen mir nach dem Lesen einige Ratschläge geben. Weisen Sie auf Fehler hin.

Warum VUE wählen

1 Die Lernkurve verläuft reibungslos und es ist nicht so schwierig zu lernen und zu reagieren wie NG.
2 Ich finde die bidirektionale Datenbindungsmethode von setget sehr clever
3 Ich bin ein verrückter Fan von You Yuxi

Warum die Schönheitswettbewerbsgruppe Essen herausbringt

Es wird geschätzt, dass das Meituan-Projekt zur Lieferung von Lebensmitteln fast vollständig entworfen werden kann. Die meisten technischen Punkte von VUE (mit Ausnahme des serverseitigen Renderings) reichen zum Üben aus. Natürlich erfordert eine echte Take-out-Entwicklung viel mehr als das. Mein Ziel ist nur die Fertigstellung eines groben Rahmens. Wird als Übung verwendet.
Wochentags verwende ich immer Meituan, wenn ich zum Mitnehmen bestelle. Wenn Sie es oft verwendet haben, kennen Sie vielleicht Meituan Takeout. emmmm, ich mag Meituan Takeaway einfach ==

Technologie-Stack

Eigentlich weiß ich nicht, was ich verwenden werde. Es ist eine Erweiterung, die auf Vuecli basiert, und ich werde zurückkommen, um sie zu ändern, wenn Ich füge es später hinzu
vue2 + vuex + vue-router +axios+ webpack + ES6+flex+stylus+ vw + svg

Referenzcode

Es wird auf den Seitencodestil und die Implementierungsmethode verwiesen hier vue-admin (Eintrag vue, den ich daraus gelernt habe)

Warum VW-Layout und 2X3X-Diagramme verwenden

Menschen bewegen sich immer weiter, wie können wir Fortschritte machen, wenn wir nicht neue Dinge ausprobieren . Ich denke, dass VW sehr einfach zu bedienen ist, also nutze ich es zum persönlichen Üben, ich denke nicht über die Probleme der Anpassung und Kompatibilität nach, sondern benutze es einfach, wenn es mir gefällt.
Wie man VW in Vue verwendet, sowie Lösungen wie 1px gleiche Proportionen, können Sie hier klicken
2X3X Bild Ich habe das direkte 3X Bild gewählt ==Ich bin faul. Tut mir leid

Über den Designentwurf

==Ich habe einen Screenshot auf meinem Handy gemacht und das Design auf meinen Computer geschickt, emmmmm Es ist so grob

Verzeichnisstruktur

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

Heute ist der erste Tag, an dem ich nur die Hälfte des Gerüsts für das Projekt aufgebaut hatte. Die Route ist noch nicht geschrieben. In Anbetracht dessen, dass die erste Seite den Store verwenden muss. Also habe ich zuerst den Store geschrieben
Mit zwei Ordnern

├── api                                     
│   └── login.js
├── utils
│   └── request.js    
├── store
├── ├── modules    
│   │     └── user.js  
├── ├── getters.js
│   └── index.js

Hauptcode

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

vues Store ist viel einfacher als Redux.
In vier Teile unterteilt.
Status: Alle Daten, die auf jeder Seite geteilt werden müssen, sind nicht so gut wie die Benutzerinformationen im obigen Code.
Getter: Rufen Sie den entsprechenden Status im Status ab Maschine. (Überprüfen)
Mutationen: Entwickeln Sie Regeln zum Ändern von Daten.
Aktion: Daten entsprechend den Mutationen ändern. Hier werden asynchrone Vorgänge platziert.

Verwandte Empfehlungen:

So vereinheitlichen Sie die Schnittstellenverwaltung von Vue und Axios

Wie erhalten Unterkomponenten in Vue den Wert? der übergeordneten Komponente? (Requisiten-Implementierung)

Das obige ist der detaillierte Inhalt vonDer Projektentwicklungsprozess von vue2 imitiert Meituan zum Mitnehmen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!