媒介

许多初学者尤其是像我如许的公司有且只要一个前端的时刻，硬着头皮去进修一门新框架，四周无人帮助，通常里遇到题目只能乞助于思否，百度，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婚配，异步操纵放在这里。