vue2练习之仿美团外卖开发（一）

前言

不少初学者尤为是像我这样的公司有且只有一个前端的时候，硬着头皮去学习一门新框架，周围无人帮忙，平日里遇到问题只能求助于思否，百度，google。点击个人我的头像去看个人提问大家就知道vue小白去学习vue真的很心累。网上搜索的时候搜索出来的都是一些简单的demo.教学网站上的项目也是一些简单的单页面或者稍微多几个页面。对我这种新手入门能够，可是拿到手作生产开发仍是远远不够。因而我尝试写一个练手型项目，具体页面有多少我也没啥数，用到的技术有啥我也没啥数，总之想到哪里开发到哪里，中间会回来查漏补缺。里面代码我尽可能每句都会有注释，但愿大佬们看到之后不吝赐教。指出错误。

为何选择VUE

1学习曲线平滑，没有NG以及react的学习起来难度那么大。
2setget的双向数据绑定方法我以为很巧妙
3我是尤雨溪脑残粉

为何选美团外卖

美团外卖项目估计差很少可以设计到大部分VUE技术点，（不包括服务端渲染）做为练习够用了。固然真正的外卖开发须要的东西远不止这些，个人目标仅仅是完成一个粗糙的框架。用做练习。
平日里我点外卖一直用美团。用多了可能也比较了解美团外卖吧。emmmm 我就是喜欢美团外卖==

技术栈

其实我也不知道我会用到哪些东西,是基于vuecli作的扩展 后面再增长的话会回来修改
vue2 + vuex + vue-router +axios+ webpack + ES6+flex+stylus+ vw + svg

参考代码

页面代码风格以及实现方式参考的是这里 vue-admin(入门vue我是对着这个学的)

为何使用VW布局以及2X3X图

人都是往前走的，不去尝试新的东西怎么进步呢。我以为VW挺好用的因而我就用了，我的练手不会考虑适配呀兼容性的问题，喜欢就去用啦。
VW如何在vue中使用，以及1px等比例等解决方案能够点这里
2X3X图 我选择直接3X图==偷懒了。抱歉

关于设计稿

==我手机截图而后发电脑上设计的emmmm 就是这么粗糙

目录结构

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

今天第一天我只把项目的脚手架搭了一半。路由尚未写。考虑到第一个页面就须要使用store。因此我先写了store
涉及到两个文件夹

├── 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的store相比较redux简单不少。
分四部分。
state：单一状态机，全部须要在每一个页面共享的数据都存放在这里，不如上面代码里的用户信息
getters:拿取状态机中对应的状态。（查）
mutations:制定修改数据的规则。
Action：进行修改数据，与mutations匹配，异步操做放在这里。