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

刺猬老爷
526 阅读3分钟
  • 直接复制 v-e-a 中的模板，会出现很多的黄色警告。一个一个来处理吧

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

零、参考文档

一、具体优化

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

1. views/login/index.vue

  • 这个应该是最早接触到的模板了，里面也有要改的
  • 【问题】弹出第三方登录的部分
  • 【解决】【附录 1.1】
<el-dialog title="Or connect with" :visible.sync="showDialog">
  • 改为
<el-dialog title="Or connect with" 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 【这个是最终的子组件】

<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 的变化。。
    • 到这里觉得改动真的有点大。。。都想着要不重新写一个好了。。这么改何时才是个头。。。
  1. vue-count-to 错误！
  • 前面一步解决完，马上出来更多错误。但是至少说明前面一步已经测通了。。。
  • warm 类型的先不管，先处理 红色 TypeError: Cannot read property '_c' of undefined
  • 定位到的是 vue-count-to
  • 查了一下，已经有前人了，继续修改。。
  • 参考 blog.csdn.net/qq_38330707…
  • 照着改就可以了== 错误消失
  1. TypeError: filters[this.visibility] is not a function
  • D:\node\z-test-vue\hello-world\src\views\dashboard\admin\components\TodoList\index.vue
  1. http://192.168.6.89:8080/dev-api/vue-element-admin/transaction/list 有一个404 错误
  • 根据 url 判断 接口数据 src/api 找到 接口是 remote-search
  • 原因是：mock 里面没有考入 remote-search.js
  1. 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: () => {
  1. Unnecessary escape character:
  • D:\node\z-test-vue\hello-world\mock\role/user.js
line 52 : 去掉 info 和 . 之间的反斜杠
line 77 : response: _ => { 改为 response: () => {
  1. 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
]
  • 到这一步出现的问题更多了，但是同一类型的错误只剩下一个，估计是每个页面都会有，只要发现一个，其他的都好处理了
  1. 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"即可
avatar
文章
阅读
粉丝