使用vue2+Vuex+Router写的Demo以及遇到的一些坑和使用建议

最新推荐文章于 2024-08-05 02:50:46 发布
最新推荐文章于 2024-08-05 02:50:46 发布
阅读量7.7k 收藏 3
点赞数
分类专栏： Vue 文章标签： Vue Vuex Vue-Router Webpack Axios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SimonITer/article/details/54932257
版权
本文作者分享了使用Vue2开发高仿饿了么点餐系统的实践，包括Vue-CLI的构建工具、Axios的使用、Vuex的状态管理和Vue-Router的路由配置。在开发过程中遇到的问题和解决方案，以及组件间通信的两种方法。还提供了项目的GitHub链接，邀请感兴趣的人参与或给出反馈。
摘要由CSDN通过智能技术生成

我的开源中国博客：https://my.oschina.net/keysITer/blog/834287

一直对vue很感兴趣，最近使用vue2.0开发了高仿饿了么点餐系统来练练手，不得不说vue真是一个很不错的框架，但是也遇到过一些坑，在这里和大家分享一下

饿了么点餐系统

vue2.0、vuex、vue-router、axios、webpack、eslint、better-scroll

部分细节还在开发中，感兴趣的可以加入进来，觉得不错的给个star

GitHub地址：https://github.com/SimonZhangITer/VueDemo_Sell_Eleme

## 演示
扫二维码在手机上查看效果更好

项目截图

最低0.47元/天 解锁文章
Simon_ITer
关注
专栏目录
详讲：vue2+vuex+axios
03-30 2万+
在vue2项目中，组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的情况下（后台获取数据存入vuex，组件之间共享数据），那么就需要用vuex来管理这些。 整个的流程是在组件的created中提交dispatch，然后通过action调用一个封装好的axios然后再触发mutation来提交状态改变state中的数据，然后在组件的计算属性中获取state的数据并渲染在页面上 首先新
使用vue2+Vuex+Router重写饿了么点餐系统和vue插件简析
weixin_34219944的博客
02-08 273
2019独角兽企业重金招聘Python工程师标准>>> ...
在vue项目中嵌入Python项目
最新发布
weixin_42663213的博客
08-05 226
在Vue项目中嵌入Python项目 在现代Web开发中，前后端分离的架构已成为一种流行趋势。前端使用现代化框架（如Vue.js）来构建用户界面，而后端则使用其他语言（如Python）来处理复杂的业务逻辑和数据库交互。将Python项目嵌入到Vue项目中，可以有效利用两种语言的优势，提升开发效率。本文将介绍如何在Vue项目中...
vue2-Vuex
weixin_45002586的博客
11-15 634
vue vuex
【Vue】Vue2中的Vuex
低调做人，低调编码，神码都是浮云
05-21 1111
Vue2中使用Vuex
vue2+vuex的使用
m0_61472704的博客
03-30 3794
一、vuex是干什么的？ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库
vue3+typescript+vuex+vue-router的实战demo实现一个购物车.zip
03-03
vue3+typescript+vuex+vue-router的实战demo实现一个购物车.zip vue3+typescript+vuex+vue-router的实战demo实现一个购物车.zip vue3+typescript+vuex+vue-router的实战demo实现一个购物车.zip vue3+typescript+vuex...
vue3-ssr-demo:一个Vue SSR的例子。使用vue3 + vue router + vuex + typescript编写
04-06
使用vue3 + vue路由器+ vuex +打字稿，编写的SSR演示。 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 运行单元测试 yarn test:unit 整理和修复文件 yarn lint 自定义配置 ...
基于vue+vuerouter+vuex+axios+webpack开发的个人Demo（社交软件）+源代码+文档说明
08-03
2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。...
基于vite+vuex+vue-router+vant3.0的h5应用框架，开箱即用
06-21
【标题】: "基于vite+vuex+vue-router+vant3.0的h5应用框架，开箱即用" 这个标题所代表的知识点聚焦在一套现代化的前端开发框架组合，用于构建高效、便捷的H5（HTML5）应用程序。其中涉及到的核心技术包括： 1. **...
使用Vue2+vue-router+vuex构建项目
zqqfives的博客
07-09 634
首先我们需要使用vue/cli来构建一个项目框架 vue create "项目名" 然后我们需要安装两个东西 //先通过npm来进行初始化项目 npm install //然后通过npm来安装 vue-router和vuex npm install -d vue-router npm install -d vuex 项目开始 我们要手动创建一个store的仓库文件夹和routers路由文件夹 我们要在main.js中引入这两个文件夹(如果不写文件名称的化自动匹配index.js) import
vue2中vuex详细使用
m0_62785037的博客
01-07 1034
vue2中vuex详细使用，辅助mapState函数放入计算属性，辅助mapMutations放入methods里面。
Vue+Vuex+Router
代码的诱惑
10-19 1692
项目结构-store -actions -plan.js -getters -modules -plan.js -mutations-types -mutation-types.js -store.js -App.vue -main.js-目录结构详解 actions：提供给组件中调用的方法，在该目录下的方法是d
vue2和vue3的路由、axios、vuex的配置和使用
Dipper_Dubhe的博客
03-29 1562
vue3使用router import Cookies from 'js-cookie'; import { createRouter, createWebHistory, RouteRecordRaw, Router, } from 'vue-router' import store from '../store'; import { getAdminInfoApi } from '../request/api' import { ElMessage } from 'element-plu
vue 学习笔记二之vue2与vue1的选择
chong2230的专栏
03-11 3171
前文提到都已经Vue2.x了，Vue1还没学呢。那么如何开始呢，是先Vue1，再Vue2，还是直接Vue2呢，得对比一下。 查阅了一些资料，看到有人提到正在把项目逐渐迁移到vue2.0，建议直接从vue2.0+开始。那么这样看来，从时间成本的角度看，加上vue1到2的进阶是比较平滑的，api相似，可以考虑直接从vue2.0+着手，至于现有的vue1.x的项目，只需要关注他们之间的差异就好了。
vue+vuex+router初体验
Awna的博客
06-12 609
前言本人是java开发出生,工作需要研究node/vue,在学习期间参照很多博文,书写示例代码,文中肯定会有很多不专业的地方,记录一方面用于自己梳理知识脉络,一方面方便日后查询,同时还可以让和我处于相同情况的码农们有个参考,废话不多说了,开始撸代码,这才是每个码农关心的问题.vue环境搭建没有详细了解的npm的伙伴们不要紧张,照着做就可以,用的多了就了解了,至于他是怎么实现的需要有精力的童鞋们研究,
vue-router+vuex实现加载动态路由和菜单
weixin_34195546的博客
09-18 6530
前言 动态路由加载和动态菜单渲染的应用在后端权限控制中十分常见，后端只要加载权限路由进行渲染返回到浏览器就可以。在前后端分离中，权限控制动态路由和动态菜单也是一个非常常见的问题。其实我们最最理想的效果是什么呢？我们访问一个应用，在登录之前有哪些路由是一定要加载的呢？你看我总结如下，你看下是不是这些： 1.登录路由 （登录功能路由） 2.系统路由（系统消息路由，比如欢迎界面，404，error等的路...
Vue2.x中vuex的使用方法及应用时的项目文件结构设计以完整demo实例解释
一位不知名小前端的一些笔记
12-21 2192
基本概念：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。目录结构：Vuex 并不限制你的代码结构。但是，它规定了一些需要遵守的规则：应用层级的状态应该集中到单个 store 对象中。提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。异步逻辑都应该封装到 action 里面...
vue+vuex+vuerouter+element+axios请求本地json文件实现增删改查
06-10
5. 在 App.vue 中使用 ElementUI 组件： ```html <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"> 首页 数据 <router-view></router-view...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值