在uni-app中使用element-ui的方法与报错解决

 更新时间:2022年04月07日 15:31:13   作者:梦一场江南烟雨  
我们在开web开发的时候,经常会使用到element或者uview-ui,下面这篇文章主要给大家介绍了关于在uni-app中使用element-ui的方法与报错解决的相关资料,需要的朋友可以参考下
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

uni-app的相关UI组件库中可能会没有你想要的功能组件,自己去开发的话需要花很多时间,此时咱们可以将别的UI组件库给安装到uni-app中来,达到直接使用该UI组件库的功能组件,例如,安装element-ui

uni-app使用element-ui需安装以下插件

npm i element-ui -S

按需引入组件需要装以下插件

npm install babel-plugin-component -D

当你安装完以上插件后,需要在main.js中进行引入,例如引入全部:

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'

Vue.use(ElementUI)

new Vue({
  el: '#app',
  render: h => h(App)
})

如果需要按需引入的话,需要装以下插件:

npm install async-validator@1.11.5

安装完后需要配置一下.babelrc 文件:

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

当你做完以上步骤后,你可能已经迫不及待的想要运行了,但是运行后你会发现居然报错了,例如:

Cannot find module ‘core-js/library/fn/object/assign

此时你需要安装一下这个插件:

npm install async-validator@1.11.5

以上为直接在main.js中引入,下面是另外一种引入方式:

在 src 文件夹中新建我们的 element 文件夹,并在里面新建一个 index.js 文件

在index文件中去书写我们需要引入的部分组件

// 导入自己需要的组件
import { Select, Option, OptionGroup, Input, Tree, Dialog, Row, Col } from 'element-ui'
const element = {
  install: function (Vue) {
    Vue.use(Select)
    Vue.use(Option)
    Vue.use(OptionGroup)
    Vue.use(Input)
    Vue.use(Tree)
    Vue.use(Dialog)
    Vue.use(Row)
    Vue.use(Col)
  }
}
export default element

最后在 main.js 中引入该文件

// css样式引入
import 'element-ui/lib/theme-chalk/index.css'
import element from './element/index'
Vue.use(element)

这样做更方便管理

补充:uniapp使用element的问题

message失效问题:

会报错:’error‘ is not undefind

一直在踩坑中…

解决如下:

在main.js中,给vue挂载实例:

将Vue.use()

Vue.use(Message);
Vue.use(Notification);

替换为:

Vue.prototype.$message = Message;
Vue.prototype.$notify = Notification;

总结

到此这篇关于在uni-app中使用element-ui的方法与报错解决的文章就介绍到这了,更多相关uni-app使用element-ui内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家!

相关文章

  • vue中的mvvm模式讲解

    vue中的mvvm模式讲解

    今天小编就为大家分享一篇关于vue中的mvvm模式讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • 详解Vue3中useLocalStorage的用法

    详解Vue3中useLocalStorage的用法

    这篇文章主要为大家详细介绍了Vue3中useLocalStorage用法的相关知识,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以了解一下
    2023-10-10
  • vue-table实现添加和删除

    vue-table实现添加和删除

    这篇文章主要为大家详细介绍了vue-table实现添加和删除,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • Vue弹窗的两种实现方式实例详解

    Vue弹窗的两种实现方式实例详解

    这篇文章主要介绍了Vue弹窗的两种实现方式,一种使用.sync修饰符另一种使用v-model,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • Vue3 directive自定义指令内部实现示例

    Vue3 directive自定义指令内部实现示例

    这篇文章主要为大家介绍了Vue3 directive自定义指令内部实现示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • vue+element-ui实现表格编辑的三种实现方式

    vue+element-ui实现表格编辑的三种实现方式

    这篇文章主要介绍了vue+element-ui实现表格编辑的三种实现方式,主要有表格内部显示和编辑切换,通过弹出另外一个表格编辑和直接通过样式控制三种方式,感兴趣的小伙伴们可以参考一下
    2018-10-10
  • Vue?nextTick获取更新后的DOM的实现

    Vue?nextTick获取更新后的DOM的实现

    本文主要介绍了Vue?nextTick获取更新后的DOM的实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • 基于Vue2x的图片预览插件的示例代码

    基于Vue2x的图片预览插件的示例代码

    本篇文章主要介绍了基于Vue2x的图片预览插件的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • Vue.use()的作用及原理解析

    Vue.use()的作用及原理解析

    这篇文章主要介绍了Vue.use()的作用及原理解析,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-09-09
  • Vue中组件之间数据的传递的示例代码

    Vue中组件之间数据的传递的示例代码

    本篇文章主要介绍了Vue中组件数据的传递的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09

最新评论

?


http://www.vxiaotou.com