![](https://img-blog.csdnimg.cn/20210706110442967.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
【Vue2后台管理项目】
Vue项目系列
不停喝水
Web. Write Less,Do More
展开
-
Vue系列 => [14] Vuex的使用
目标 1.Vuex概述 2.Vuex基本使用 3.使用Vuex完成todo案例 1.Vuex概述 Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间的数据共享 使用Vuex管理数据的好处: A.能够在vuex中集中管理共享的数据,便于开发和后期进行维护 B.能够高效的实现组件之间的数据共享,提高开发效率 C.存储在vuex中的数据是响应式的,当数据发生改变时,页面中的数据也会同步更新 2.Vuex的基本使用 创建带有vuex的vue项目,打开终端,输入命令:vue ui原创 2020-11-01 19:59:15 · 187 阅读 · 0 评论 -
Vue系列 => [BUG] 面包屑导航切换到首页 侧导航栏激活问题
vue监听$route变化,报错: Error in callback for watcher “$route”: “TypeError: Cannot read property ‘call’ of undefined” watch: { // 如果路由有变化,会再次执行该方法 $route: function(newV) { console.log(newV) if (newV.path == '/welcome') { this.activeSta原创 2020-10-22 19:25:41 · 611 阅读 · 0 评论 -
Vue系列 => [13] 后台管理系统项目 =>07- 项目优化 项目上线
目标 1.完成项目优化 2.完成项目上线 1.项目优化 实现步骤: A.生成打包报告,根据报告优化项目 B.第三方库启用CDN C.Element-UI组件按需加载 D.路由懒加载 E.首页内容定制 2.添加进度条 给项目添加进度条效果,先打开项目控制台,打开依赖,安装nprogress 打开main.js,编写如下代码 //导入进度条插件 import NProgress from 'nprogress' //导入进度条样式 import 'nprogress/nprogress.css' ..... /原创 2020-10-30 17:03:55 · 204 阅读 · 0 评论 -
Vue系列 => [12] 电商后台管理系统项目 =>06-添加商品 Echarts图表
目标 1.完成商品添加 2.完成订单列表 3.完成数据统计展示 1.添加商品 A.完成图片上传 使用upload组件完成图片上传 在element.js中引入upload组件,并注册 因为upload组件进行图片上传的时候并不是使用axios发送请求 所以,我们需要手动为上传图片的请求添加token,即为upload组件添加headers属性 //在页面中添加upload组件,并设置对应的事件和属性 <el-tab-pane label="商品图片" name="3"> <!-- 商品原创 2020-10-29 23:10:21 · 313 阅读 · 0 评论 -
Vue系列 => [11] 电商后台管理系统项目 =>05- 参数管理 商品列表
目标 1.完成参数管理 2.推送代码到码云 3.制作商品列表页面 4.制作商品添加页面 1.参数管理 A.展示动态参数可选项 动态参数可选项展示及操作 在获取动态参数的方法中进行处理。 //将获取到的数据中的attr_vals字符串转换为数组 res.data.forEach(item => { item.attr_vals = item.attr_vals ? item.attr_vals.split(' ') : [] //添加一个bool值控制文本框的显示或者隐藏 item.inpu原创 2020-10-28 17:04:37 · 291 阅读 · 0 评论 -
Vue系列 => [10] 电商后台管理系统项目 =>04-商品分类 参数管理
目标 1.完成商品分类 2.完成参数管理 1.商品分类 A.新建分支goods_cate 新建分支goods_cate并推送到码云 git checkout -b goods_cate, git push -u origin goods_cate B.创建子级路由 创建categories子级路由组件并设置路由规则 import Cate from './components/goods/Cate.vue' path: '/home', component: Home, redirect: '/welco原创 2020-10-24 23:17:38 · 232 阅读 · 0 评论 -
Vue系列 => [09] 电商后台管理系统项目 =>03-权限管理
目标 1.修改用户,删除用户 2.推送代码到码云 3.权限列表 4.角色列表 5.分配角色 1.修改用户信息 A.为用户列表中的修改按钮绑定点击事件 B.在页面中添加修改用户对话框,并修改对话框的属性 C.根据id查询需要修改的用户数据 //展示编辑用户的对话框 async showEditDialog(id) { //发送请求根据id获取用户信息 const { data: res } = await this.$http.get('users/' + id) //判断如果添加失败原创 2020-10-21 23:27:51 · 216 阅读 · 0 评论 -
Vue系列 => [08] 电商后台管理系统项目 =>02-用户管理
1.实现后台首页的基本布局 2.实现左侧菜单栏 3.实现用户列表展示 4.实现添加用户 1.后台首页基本布局 打开Home.vue组件,进行布局: <el-container class="home-container"> <!-- 头部区域 --> <el-header>Header<el-button type="info" @click="logout"> 退出 </el-button></el-header> &l.原创 2020-10-19 22:39:32 · 282 阅读 · 0 评论 -
Vue系列 => [07] 电商后台管理系统项目 =>01-登陆页面
一:项目步骤 1.拿到项目先看这三个文件 main.js入口文件 App.vue.根组件 router=>index.js 2.@符号 就是src目录的别名 3.配置Vue.config.js(无需配置) // 这个是vue读取的配置文件,里面的配置最终都是给webpack写的配置 // 但是我们现在采用的是3.0+的脚手架,讲究是0配置,所以看不见webpack的配置文件webpack.config.js // 这里写的代码因为是给webpack使用所以需要commonJSde 规范(本质上就是原创 2020-10-19 21:26:09 · 397 阅读 · 0 评论