时间:2021-07-01 10:21:17 帮助过:101人阅读
很多初学者尤其是像我这样的公司有且只有一个前端的时候,硬着头皮去学习一门新框架,周围无人帮忙,平日里遇到问题只能求助于思否,百度,google。点击我的个人头像去看我的提问你们就知道vue小白去学习vue真的很心累。网上搜索的时候搜索出来的都是一些简单的demo.教学网站上的项目也是一些简单的单页面或者稍微多几个页面。对我这种新手入门可以,但是拿到手做生产开发还是远远不够。于是我尝试写一个练手型项目,具体页面有多少我也没啥数,用到的技术有啥我也没啥数,总之想到哪里开发到哪里,中间会回来查漏补缺。里面代码我尽量每句都会有注释,希望大佬们看到以后不吝赐教。指出错误。
1学习曲线平滑,没有NG以及react的学习起来难度那么大。
2setget的双向数据绑定方法我觉得很巧妙
3我是尤雨溪脑残粉
美团外卖项目估计差不多能够设计到大部分VUE技术点,(不包括服务端渲染)作为练习够用了。当然真正的外卖开发需要的东西远不止这些,我的目标仅仅是完成一个粗糙的框架。用作练习。
平日里我点外卖一直用美团。用多了可能也比较了解美团外卖吧。emmmm 我就是喜欢美团外卖==
其实我也不知道我会用到哪些东西,是基于vuecli做的扩展 后面再增加的话会回来修改
vue2 + vuex + vue-router +axios+ webpack + ES6+flex+stylus+ vw + svg
页面代码风格以及实现方式参考的是这里 vue-admin(入门vue我是对着这个学的)
人都是往前走的,不去尝试新的东西怎么进步呢。我觉得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匹配,异步操作放在这里。
相关推荐:
如何实现Vue和axios的接口管理统一
Vue中子组件怎么获取父组件的值?(props实现)
以上就是vue2仿美团外卖的项目开发过程的详细内容,更多请关注Gxl网其它相关文章!