The project development process of vue2 imitating Meituan takeout

The content shared with you in this article is about the project development process of vue2 imitating Meituan takeout. The content is very detailed. Next, let’s take a look at the specific content. I hope it can help everyone.

Preface

Many beginners, especially when a company like mine has one and only one front-end, bite the bullet and learn a new framework without anyone around to help. If you have any questions, you can only turn to Sifu, Baidu, and Google. Click on my profile picture to see my questions. You will know that it is really tiring for Vue newbies to learn Vue. When searching online, all I found were simple demos. The projects on the teaching website were also simple single pages or slightly more than a few pages. It's okay for a novice like me to get started, but it's still far from enough to get started with production development. So I tried to write a hand-training project. I didn’t know how many specific pages there were, and I didn’t know how many technologies were used. In short, I developed whatever I thought of, and I would come back to check for omissions and fill in the gaps. I will try my best to have comments on every sentence of the code inside. I hope that the big guys will give me some advice after reading it. Point out the error.

Why choose VUE

1 The learning curve is smooth, and it is not as difficult to learn as NG and react.
2 I think the two-way data binding method of setget is very clever.
3 I am a fan of You Yuxi.

Why the beauty pageant takes out food

The Meituan takeout project can probably be designed. Most VUE technical points (excluding server-side rendering) are enough for practice. Of course, real takeout development requires much more than these. My goal is just to complete a rough framework. Used as an exercise.
On weekdays, I always use Meituan when ordering takeout. If you have used it a lot, you may be familiar with Meituan Takeout. emmmm I just like Meituan Takeout==

Technology Stack

Actually, I don’t know what I will use. It is an extension based on vuecli and I will come back and modify it if I add it later
vue2 vuex vue-router axios webpack ES6 flex stylus vw svg

Reference code

The page code style and implementation method refer to vue-admin (I learned this when getting started with vue) )

Why use VW layout and 2X3X diagram

People are always moving forward, how can we make progress if we don’t try new things. I think VW is very easy to use, so I use it. For personal practice, I don’t think about the issues of adaptation and compatibility. I just use it if I like it.
How to use VW in vue, and solutions such as 1px equal proportions, you can click here
2X3X picture I chose the direct 3X picture==I am lazy. Sorry

About the design draft

==I took a screenshot on my mobile phone and sent it to the emmmm I designed on my computer. It’s so rough

Directory structure

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

The first day today I only had half of the scaffolding up for the project. The route has not been written yet. Considering that the first page needs to use the store. So I first wrote the store
Involving two folders

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

Main code

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’s store is much simpler than redux.
is divided into four parts.
state: A single state machine. All data that needs to be shared on each page is stored here. It is not as good as the user information in the above code.
getters: Get the corresponding state in the state machine. (Check)
mutations: Develop rules for modifying data.
Action: Modify data to match mutations, asynchronous operations are placed here.

Related recommendations:

How to unify the interface management of Vue and axios

How do sub-components in Vue obtain the value of the parent component? (props implementation)

The above is the detailed content of The project development process of vue2 imitating Meituan takeout. For more information, please follow other related articles on the PHP Chinese website!