vue电商管理项目经验记录

最新推荐文章于 2022-08-19 14:24:32 发布

weixin_43797504

最新推荐文章于 2022-08-19 14:24:32 发布

阅读量274

点赞数

文章标签： vue.js node.js

本文链接：https://blog.csdn.net/weixin_43797504/article/details/114675189

版权

2021.3月份打算开始自学vue
在b站看到了一个电商管理项目的教程
视频链接: link.
首先，按照视频中的步骤一步一步安装好vue，vue cli，vue router，node.js

1.vue项目可以正常运行，但是打开页面发现页面空白，然后报错如图所示

*解决办法：打开代码是缺少 一段语句。

// 必不可少
export default router

2.解决第一个bug之后，打开页面报错

在这里插入图片描述

解决办法：升级npm cli版本

3.解决第二个bug之后，登录成功页面并不能跳转
在这里插入图片描述

解决办法：①检查发现是application里面sessionStorage的token没有正确的存储，图中，key的值变成token的值了，而value的值变成undenfied

②检查把login页面的存储token值操作的代码改成

//存储token的值到sessionStorage里
window.sessionStorage.setItem('token', res.data.token)

4.主页左侧菜单获取不到数据
在这里插入图片描述
发现是代码错误，menus写成了menu

// 错误代码
const { data: res } = await this.$http.get('menu')

// 正确代码
const { data: res } = await this.$http.get('menus')

5.得不到status的数据
在这里插入图片描述
查看代码

// 错误代码
if (res.data.status !== 200) return this.$message.error(res.meta.msg)
      this.menulist = res.data

发现res.data.status这里错误
应该改成 res.meta.status

1.向服务器传输要改变的用户状态的时候
代码需要使用反引号，不然数据传输不过去

//向服务器传输要改变的用户状态
const { data: res } = await this.$http
        .put(`users/${userinfo.id}/state/${userinfo.mg_state}`)

2.出现报错
ESLint: The template root requires exactly one element. (vue/valid-template-root)
在这里插入图片描述
这是因为vue的模版中只有能一个根节点，所以在中插入第二个元素就会报错

解决方案：

在template里面用一个div盒子包起来，就不会报错了。

3.封装js文件引入vue项目中发现数据乱码
解决方法：
把代码复制到一个txt文档里
选择另存为的时候
选择编码为utf-8=

4.echarts 出现 TypeError: Cannot read property ‘init’ of undefined
解决方法
引入echarts改成import * as echarts from ‘echarts’

关注