vue 自定义系统流程【4】模板兼容性修改 【更新中】 - 掘金

• 直接复制 v-e-a 中的模板，会出现很多的黄色警告。一个一个来处理吧

模板兼容性修改 --- 【更新中】

零、参考文档

• 官网 升级指南 v3.cn.vuejs.org/guide/migra…

一、具体优化

• 到这里，页面一片空白，为了更快的测试出来，我决定先把其他路由都注释掉，只留下 dashboard 的路由

constantRoutes 不变
asyncRoutes 的路由只留下 * 的那一项

1. views/login/index.vue

• 这个应该是最早接触到的模板了，里面也有要改的
• 【问题】弹出第三方登录的部分
• 【解决】【附录 1.1】

<el-dialog  :visible.sync="showDialog">

• 改为

<el-dialog  v-model="showDialog">

• 设置完成之后，又可以愉快的弹出窗口了

2. views/dashboard/index.vue 首页

• 这是最让人蛋疼的地方了。弹出了一堆的错误，warn 和 error 级别都有。
• 翻了很多的文档只能一个一个的来处理

1. Unhandled error during execution of setup function

• 有些人碰到的是组件名称和 模板名称一样，改了就好了
• 发现在这里并不是，而是 render 函数的问题。
• 最终定位在 \src\views\layout\components\Sidebar\item.vue
• 路由流程：

路由引入router.js -> 指向dashboard -> 引入 views\dashboard\index.vue ->  

\views\dashboard\admin-> index.vue 【加载权限】 -> views\layout\index.vue 【框架组件根模板】->
\views\layout\components\Sidebar\Item.vue 【这个是最终的子组件】

• 问题点：render 函数【读了2遍文档，才发现。。。】

  • Vue3 的render 进行了修改，
  • 重点文档render函数 ：v3.cn.vuejs.org/api/options…
  • props：v3.cn.vuejs.org/guide/compo…
  • h 参数： v3.cn.vuejs.org/guide/rende…
  • 迁移文档：v3.cn.vuejs.org/guide/migra…

• 修改：

<script>
import { h } from 'vue';
export default {
  name: 'MenuItem',
  functional: true,
  props: {
    icon: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    }
  },
  render(){
   const vnodes = []
   const icon = this.icon
   const title = this.title
    if (icon) {
      if (icon.includes('el-icon')) {
        vnodes.push(<i class={[icon, 'sub-el-icon']} />)
      } else {
      vnodes.push(<svg-icon icon-class={icon}/>)
      }
    }

    if (title) {
      vnodes.push(<span slot='title'>{(title)}</span>)
    }
  }


   return h('MenuItem',vnodes)
}

• 小结：
  • 一个是render 函数变化，不能传参
  • 一个是 h 的变化。。
  • 到这里觉得改动真的有点大。。。都想着要不重新写一个好了。。这么改何时才是个头。。。

2. vue-count-to 错误！

• 前面一步解决完，马上出来更多错误。但是至少说明前面一步已经测通了。。。
• warm 类型的先不管，先处理 红色 TypeError: Cannot read property '_c' of undefined
• 定位到的是 vue-count-to
• 查了一下，已经有前人了，继续修改。。
• 参考 blog.csdn.net/qq_38330707…
• 照着改就可以了== 错误消失

3. TypeError: filters[this.visibility] is not a function

• D:\node\z-test-vue\hello-world\src\views\dashboard\admin\components\TodoList\index.vue

4. http://192.168.6.89:8080/dev-api/vue-element-admin/transaction/list 有一个404 错误

• 根据 url 判断 接口数据 src/api 找到 接口是 remote-search
• 原因是：mock 里面没有考入 remote-search.js

5. error '_' is defined but never used no-unused-vars

• \mock\role/index.js

line 43,line 55 : response: _ => { 改为 response: () => {

• \mock\role/remote-search.js

response: _ => { 改为 response: () => {

6. Unnecessary escape character:

• D:\node\z-test-vue\hello-world\mock\role/user.js

line 52 : 去掉 info 和 . 之间的反斜杠
line 77 : response: _ => { 改为 response: () => {

7. mock.js?96eb:8363 GET http://192.168.6.89:8080/dev-api/vue-element-admin/transaction/list 404 (Not Found)

• 访问 虚拟数据的时候 404
• 之前mock 里面没有开启
• \mock/index.js

const search = require('./remote-search')
const mocks = [
    //这里增加
    ...search
]

• 到这一步出现的问题更多了，但是同一类型的错误只剩下一个，估计是每个页面都会有，只要发现一个，其他的都好处理了

8. TypeError: filters[this.visibility] is not a function

• 全部定位在 src\views\dashboard\admin\components\TodoList\index.vue filteredTodos()
• 页面出现了很多的wran ,
• 为了测试，我改了一下

- 原本的 return filters[this.visibility](this.todos)
- 改为 return {}，发现页面出来了。黄色警告依然。

• 到这一步，接近胜利的感觉。下一步要考虑先解决 8 号错误，或者是先解决黄色警告了。初步判断有可能还是计数器引起的黄色警告，然后造成了 filters 有问题，下面再继续分析。先暂停休息。。。
• 未完待续

附录

1. 各种升级变化

1. 属性绑定的问题

- [Vue warn]: Missing required prop: "modelValue"
- [Vue warn]: Extraneous non-props attributes (visible) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.

v-model:visible="xxx"改为v-model="xxx"即可