這篇文章分享給大家的內容是關於vue2仿美團外賣的專案開發過程,內容很詳細,接下來我們就來看看具體的內容,希望可以幫助到大家。
很多初學者尤其是像我這樣的公司有且只有一個前端的時候,硬著頭皮去學習一門新框架,周圍無人幫忙,平日里遇到問題只能求助於思否,百度,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匹配,非同步操作放在這裡。
相關推薦:
以上是vue2仿美團外送的專案開發過程的詳細內容。更多資訊請關注PHP中文網其他相關文章!