前言很多初学者，尤其是像我这种只有一个前端的公司，硬着头皮学习一个新的框架。周围没有人可以帮忙。遇到问题只能求助于师傅、百度、谷歌。点我头像看我的问题，你就知道Vue小白学Vue真的好累。在网上搜索的时候，找到了一些简单的demo。教学网站上的项目也是一些简单的单页或几页。像我这样的新手入门还可以，但是生产开发就不行了。所以我试着写了一个动手项目。不知道有多少具体的页面，也不知道用了什么技术。里面的每一句代码我都尽量有注释，希望大佬们看到后多多指教。指出错误。为什么选择学习曲线平滑的VUE1，它不像NG和react那么难学。2、我觉得setget的双向数据绑定方式很巧妙。3.我是尤雨熙的粉丝。为什么是美团外卖项目？估计大部分VUE的技术点都可以设计（不包括服务端渲染）作为练习。.当然，真正的外卖开发需要的远不止这些，我的目标只是完成一个大概的框架。将其用作练习。平日里，我总是用美团订外卖。如果你经常使用它，你可能也会对美团外卖了解更多。emmmmm我就是喜欢美团外卖==技术栈其实我也不知道会用到什么。它基于vuecli所做的扩展。后面加的话回来修改vue2+vuex+vue-router+axios+webpack+ES6+flex+stylus+vw+svg参考codepage代码风格和实现参考这里的vue-admin（我学习了这个当开始使用vue时）为什么要使用VW布局和2X3X图人们在前进而不是尝试新事物如何改进？我觉得VW很好用，所以就用了。个人觉得不考虑适配和兼容性问题，喜欢就用。vue中如何使用VW，以及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//gitignoreitem├──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'importCookiesfrom'js-cookie'constemptyuser={userId:'',//用户IDname:'',//用户名avatar:'',//用户头像hasaccount:'',//是否有账号密码，可能有手机号验证码直接登录不用设置账号密码mobile:'',//手机号wx:''//是否绑定微信账号}constuser={userinfo:Cookies.get('userinfo')||{userId:'',//用户IDname:'',//用户名avatar:'',//用户头像hasaccount:'',//是否有账号密码，可能是手机号验证码不设置账号密码直接登录mobile:'',//手机号wx:''//是否绑定微信},mutations:{SET_USERINFO:(state,code)=>{state.userinfo={...code}//养成修改对象或数组时使用展开运算符的习惯}},actions:{//用户名登录LoginByUsername({commit},userInfo){returnnewPromise((resolve,reject)=>{loginByUsername(userInfo.username,userInfo.password).then(response=>{constdata=response.datacommit('SET_USERINFO',data.userinfo)resolve()}).catch(error=>{reject(error)})})},LoginByMobile({commit},userInfo){returnnewPromise((resolve,reject)=>{loginByMobile(userInfo.mobile,userInfo.code).then(response=>{constdata=response.datacommit('SET_USERINFO',data.token)resolve()}).catch(error=>{reject(error)})})},//注销LogOut({commit,state}){returnnewPromise((resolve,reject)=>{logout(state.userId).then(()=>{commit('SET_USERINFO',emptyuser)resolve()}).catch(error=>{reject(error)})})}}}exportdefaultuservue比较使用redux，store就简单多了，分为四个部分。state：单个状态机，每个页面需要共享的数据都存储在这里，不如上面代码中的用户信息getter：获取状态机中对应的状态。(Check)mutations：制定修改数据的规则。Action：修改数据，匹配突变，异步操作都放在这里。
