README.md · yangtongcheng/zhufeng-vue3-system2105

# zhufeng-vue3-system2105

# vue3 管理系统训练营

## 学习目标

- 前端技术栈：vue3.0+typescript+element-plus
- 后端技术栈：koa2+sequelize+mysql
- 通用组件：  
         - 面包屑  
         - 标签导航  
         - 侧边栏(权限菜单)  
         - 自定义 icon（Svg Sprite 图标）  
         - 拖拽看板  
         - 路由检索
- 通用功能：  
          - 主题切换 (基于 element-plus)  
          - Screenfull 全屏  
          - 图片上传  
          - 登陆注册（jwt）  
          - 权限控制(系统管理：用户管理、角色管理、菜单管理)  
          - 权限验证（页面权限、指令权限）

## 入营须知

- 需要参加的小伙伴必须把学号和姓名添加到表格中[vue3 管理系统训练营](https://shimo.im/sheets/YTYrXKcHPrxqJh6g/MODOC/)；
- 本期训练营预计两周，每两天发布一次文档以及作业；每两天交一次作业作为一个阶段的任务；
- 参加本训练营需要支付 10 学分；
- 发布作业的当天晚上 8 点布置实践任务，截止两天后晚上 8 点前完成提交作业；完成阶段任务，每 part 可获得 5 学分，共 7 次；
- 如果当天任务无法完成，则中止训练营资格，请自动离群，无法参与后续的学习，已经扣除的学分不退机会只有一次，希望把握住
- 全部学员按学号尾号分为 10 个组,尾号相同的为一组,当天小组成员全部完成的每个人的学分翻倍
- 在其期间因为某些原因不能参加训练营的小伙伴们要私聊助教

## 训练流程

1. 先将训练营的仓库代码仓库 Fork 到自己的码云账号下：[https://gitee.com/zhufengpeixun/zhufeng-vue3-system2105](https://gitee.com/zhufengpeixun/zhufeng-vue3-system2105)
2. 将 Fork 后的仓库 Clone 到本地
3. 在项目根目录下创建自己的项目并完成查看 README.md 文档
4. 把实践总结(学到了什么？收获了什么?遇到了什么问题?如何解决的?)写在当天目录的学习日记.md 文件里
5. 在本地仓库完成作业后，push 到自己的码云远程仓库中
6. 最后将自己最后的 commit 链接地址添加到训练营仓库的当天 issue 中
7. 完成后在微信群中打卡，并@助教表示完成，在自己小组里可以@组长表示完成，组长可以在表格里添加学分，全员晚八点之前完成就可以进行翻倍，前提是组长需要向助教截图
8. 大家如果遇到问题可以在群里讨论的

如果不会操作的可以看操作视频:[http://img.zhufengpeixun.cn/submitwork.mp4](http://img.zhufengpeixun.cn/submitwork.mp4)

## 文档

[https://www.yuque.com/brolly/hgg6ly/weypq3](https://www.yuque.com/brolly/hgg6ly/weypq3)

## TypeError: Converting circular structure to JSON

- 报错

```
[Vue warn]: Error in nextTick: "TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Object'
    |     property 'root' -> object with constructor 'Object'
    --- property 'store' closes the circle"
```

- 分析  
  vuex 中的状态管理 state 中存储了 router 实例（组件中获取的 this.\$route），存在循环引用.  
  vuex 使用了插件 vuex-persistedstate  
  state 中有了循环引用，插件 vuex-persistedstate 要执行 JSON.stringify 把 state 数据转化成字符串然后存储到浏览器本地存储。
- 解决  
  在存储 router 实例时，使用深拷贝解除循环引用

## 高级前端开发者必会的 34 道 Vue 面试题系列

https://zhuanlan.zhihu.com/p/115169617

## 2021 年前端面试必读文章

https://juejin.cn/post/6844904116339261447?utm_source=gold_browser_extension%3Futm_source%3Dgold_browser_extension

## 前端下载 txt

```js
/**
 * 将字符串文本导出为txt文件
 * constent { string } 需要下载的文本
 */
function downloadTxt(content) {
  // 方式一
  const url = window.URL.createObjectURL(new Blob([content]))
  // 方式二
  const url = `data:text/plain;charset=utf-8,${encodeURIComponent(content)}`

const filename = `${Date.now()}.txt`
  const el = document.createElement('a')
  el.setAttribute('href', url)
  el.setAttribute('download', filename)
  el.setAttribute('style', 'display:none')
  document.body.appendChild(el)
  el.click()
  el.parentNode.removeChild(el)

// 方式一下载完成后需要释放链接
  window.URL.revokeObjectURL(url)
}
```

## iframe 相关 api

### 事件

- onload 在 frame 载入完成后

```html
<iframe src="frame.html" onload="load()"></iframe>
```

```js
function load() {
  console.log('iframe加载完成')
}
```

### 属性

- contentWindow 返回 frame/iframe 生成的 window 对象

```html
<iframe id="myframe" src="demo_iframe.htm"></iframe>
```

```js
const frame = document.getElementById('myframe')
const body = frame.contentWindow || frame.contentDocument
body.style.background = '#efc'
```

### 文档

https://www.w3cschool.cn/jsref/dom-obj-frame.html

yangtongcheng/zhufeng-vue3-system2105

简介

发行版

贡献者

近期动态

yangtongcheng/zhufeng-vue3-system2105 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

yangtongcheng/zhufeng-vue3-system2105