Meituanのテイクアウトを模倣したvue2のプロジェクト開発プロセス

この記事で共有する内容は、Meituan のテイクアウトを模倣した vue2 のプロジェクト開発プロセスに関するものです。次に、具体的な内容を見てみましょう。

はじめに

多くの初心者は、特に私のような会社がフロントエンドを 1 つしか持っていない場合、苦労して新しいフレームワークを学習します。平日に問題が発生した場合、助けを求めることしかできません。百度、グーグル。私のプロフィール写真をクリックすると、私の質問が表示されます。Vue の初心者にとって、Vue を学ぶのは本当に大変なことだとおわかりでしょう。オンラインで検索しても、見つかったのは単純なデモだけで、教育用 Web サイトにあるプロジェクトも、単純な 1 ページか、数ページ強でした。私のような初心者が始めるのは問題ありませんが、製品開発を始めるにはまだ十分ではありません。そこで私は手動トレーニングのプロジェクトを書こうとしましたが、具体的なページがどれだけあるのかもわかりませんでした。つまり、思いついたものをすべて開発して戻ってきました。抜け漏れがないか確認し、穴埋めをします。コード内のすべての文にコメントを付けるように最善を尽くします。読んだ後、偉い人が私にアドバイスをくれることを願っています。間違いを指摘してください。

VUE を選ぶ理由

1 学習曲線はスムーズで、NG ほど学習して反応するのは難しくありません。
2 setget の双方向データ バインディング方法は非常に賢いと思います 3 I am a fan of You Yuxi ) は練習として十分です。もちろん、実際の開発にはこれらよりもはるかに多くのものが必要です。私の目標は、大まかなフレームワークを完成させることだけです。練習として使用されます。
平日、テイクアウトを注文するときはいつも美団を利用します。よく利用したことがある人なら、美団テイクアウトをご存知かもしれません。えっと、Meituan Takeout==

テクノロジースタック

実際、何を使うかはわかりませんが、後で追加する場合は、戻って修正します
vue2 +。 vuex + vue-router +axios+ webpack + ES6+flex+stylus+ vw + svg

リファレンスコード

ページのコードスタイルと実装方法はvue-adminを参照しています（vueを始めるためにこれを学びました）

VWを使用する理由レイアウトと 2X3X の図

新しいことに挑戦しなければ、どうやって進歩することができますか? VWはとても使いやすいと思うので、個人練習用としては適応性や互換性などは考えずに気に入ったら使っています。

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

初日の今日は足場の半分しか建ててませんプロジェクトの。ルートはまだ書かれていません。最初のページはストアを使用する必要があることを考慮します。そこで、最初にストアを書きました

2 つのフォルダーが含まれています

├── 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 よりもはるかに単純です。
4つのパートに分かれています。

state: 各ページで共有する必要があるすべてのデータがここに保存されます。

getters: ステート マシンで対応する状態を取得します。 (チェック)

mutations: データを変更するためのルールを作成します。

アクション: データを変更し、非同期操作をここに配置します。

関連する推奨事項:


Vue と axios のインターフェイス管理を統合する方法

Vue のサブコンポーネントはどのようにして親コンポーネントの値を取得しますか? (小道具の実装)

以上がMeituanのテイクアウトを模倣したvue2のプロジェクト開発プロセスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。