Le processus de développement du projet vue2 imitant Meituan Takeout

Le contenu partagé avec vous dans cet article concerne le processus de développement du projet de vue2 imitant Meituan takeout. Le contenu est très détaillé. Examinons ensuite le contenu spécifique, en espérant aider tout le monde.

Avant-propos

De nombreux débutants, surtout lorsqu'une entreprise comme la mienne n'a qu'un et un seul front-end, mordent la balle et apprennent un nouveau framework sans personne pour vous aider si vous avez des questions. , vous ne pouvez vous tourner que vers Sifu, Baidu et Google. Cliquez sur ma photo de profil pour voir mes questions. Vous saurez que c'est vraiment fatiguant pour les débutants de Vue d'apprendre Vue. Lors d'une recherche en ligne, tout ce que j'ai trouvé étaient de simples démos. Les projets sur le site Web d'enseignement étaient également de simples pages simples ou un peu plus de quelques pages. C'est bien pour un novice comme moi de se lancer, mais c'est encore loin d'être suffisant pour se lancer dans le développement de production. J'ai donc essayé d'écrire un projet d'entraînement manuel. Je ne savais pas combien de pages spécifiques il y avait, et je ne savais pas combien de technologies étaient utilisées. Bref, j'ai développé ce à quoi je pensais, et je reviendrais. pour vérifier les omissions et combler les lacunes. Je ferai de mon mieux pour avoir des commentaires sur chaque phrase du code à l'intérieur. J'espère que les grands me donneront quelques conseils après l'avoir lu. Signalez les erreurs.

Pourquoi choisir VUE

1 La courbe d'apprentissage est fluide et il n'est pas aussi difficile d'apprendre que NG et de réagir.
2 Je pense que la méthode de liaison de données bidirectionnelle de setget est très intelligente
3 Je suis une fan folle de You Yuxi

Pourquoi le groupe du concours de beauté sort de la nourriture

On estime que le projet de livraison de nourriture Meituan peut presque être conçu. La plupart des points techniques de VUE (hors rendu côté serveur) sont suffisants pour la pratique. Bien sûr, un véritable développement à emporter nécessite bien plus que cela. Mon objectif est simplement de compléter un cadre approximatif. Utilisé comme exercice.
En semaine, j'utilise toujours Meituan pour commander des plats à emporter. Si vous l'utilisez davantage, vous connaissez peut-être Meituan Takeout. emmmm j'aime juste Meituan Takeout==

Pile technologique

En fait, je ne sais pas ce que je vais utiliser C'est une extension basée sur vuecli et je reviendrai pour la modifier si. Je l'ajoute plus tard
vue2 + vuex + vue-router +axios+ webpack + ES6+flex+stylus+ vw + svg

Code de référence

Le style de code de page et la méthode d'implémentation sont mentionnés ici vue-admin (entrée vue j'en ai appris)

Pourquoi utiliser la disposition VW et les diagrammes 2X3X

Les gens vont toujours de l'avant, comment pouvons-nous progresser si nous n'essayons pas de nouvelles choses . Je pense que VW est très simple à utiliser, donc je l'utilise pour ma pratique personnelle, je ne pense pas aux problèmes d'adaptation et de compatibilité, je l'utilise juste si je l'aime.
Comment utiliser VW dans vue, ainsi que des solutions telles que 1px à proportions égales, vous pouvez cliquer ici
Photo 2X3X J'ai choisi l'image directe 3X==Je suis paresseux. Désolé

À propos du brouillon de conception

== J'ai pris une capture d'écran sur mon téléphone et j'ai envoyé le design sur mon ordinateur emmmmm C'est tellement difficile

Structure des répertoires

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

Chapitre d'aujourd'hui, je n'ai monté que la moitié de l'échafaudage du projet en une journée. L'itinéraire n'est pas encore écrit. Considérant que la première page doit utiliser le magasin. J'ai donc d'abord écrit le magasin
impliquant deux dossiers

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

code principal

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

le magasin de vue est beaucoup plus simple que redux.
Divisé en quatre parties.
état : une seule machine à états. Toutes les données qui doivent être partagées sur chaque page sont stockées ici. Ce n'est pas aussi bon que les informations utilisateur dans le code ci-dessus.
getters : obtenez l'état correspondant dans l'état. machine. (Vérifier) ​​
mutations : Développer des règles de modification des données.
Action : Modifier les données pour correspondre aux mutations. Les opérations asynchrones sont placées ici.

Recommandations associées :

Comment unifier la gestion de l'interface de Vue et axios

Comment les sous-composants de Vue obtiennent-ils la valeur du composant parent ? (implémentation des accessoires)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!