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.
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.
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.
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==
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
The page code style and implementation method refer to vue-admin (I learned this when getting started with vue) )
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
==I took a screenshot on my mobile phone and sent it to the emmmm I designed on my computer. It’s so rough
├── 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 uservue’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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
