vue2.0版本引入Element-ui问题解决

嗝屁小孩纸2024-11-05 20:25

作者：fyupeng

技术专栏：☞ https://github.com/fyupeng

项目地址：☞ https://github.com/fyupeng/distributed-blog-system-api

留给读者
使用版本：
vue:2.6.14
element-ui:2.15.14

一、问题及解决

1、安装后组件没有生效，报错：

shell 复制代码

`main.js:74 [Vue warn]: Property or method "__v_isRef" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

解决方案（已验证）：

shell 复制代码

npm i element-ui -S

全局引入，介意启动项目太慢选择局部引入：

js 复制代码

import Vue from 'vue'

import ElementUI from 'element-ui'; // ui组件
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);


import App from './App.vue'
....

// 放最后面，只能有一个 Vue 实例
new Vue({
  el: '#app', // 指定挂载点
  router, // 注入路由
  store, // 注入 Vuex store
  render: h => h(App) // 渲染 App 组件作为根组件
});

无需配置 CDN link标签就不配置，我就是配置后导致失效的。

2、遇到组件引入后，比如<el-input> 报错:

shell 复制代码

[Vue warn]: Property or method "__v_isRef" is not defined on the instance but referenced during render.

解决方案（已验证）：清理和重建项目：删除 node_modules 文件夹和任何锁文件（如 yarn.lock 或 package-lock.json），然后重新安装依赖项。

二、总结

简洁、高效、易用！