在uni-app中使用element-ui的方法與報(bào)錯(cuò)解決

更新時(shí)間：2022年04月07日 15:31:13 作者：夢(mèng)一場(chǎng)江南煙雨

我們?cè)陂_(kāi)web開(kāi)發(fā)的時(shí)候，經(jīng)常會(huì)使用到element或者uview-ui,下面這篇文章主要給大家介紹了關(guān)于在uni-app中使用element-ui的方法與報(bào)錯(cuò)解決的相關(guān)資料,需要的朋友可以參考下

uni-app的相關(guān)UI組件庫(kù)中可能會(huì)沒(méi)有你想要的功能組件，自己去開(kāi)發(fā)的話需要花很多時(shí)間，此時(shí)咱們可以將別的UI組件庫(kù)給安裝到uni-app中來(lái)，達(dá)到直接使用該UI組件庫(kù)的功能組件，例如，安裝element-ui

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

npm i element-ui -S

按需引入組件需要裝以下插件

npm install babel-plugin-component -D

當(dāng)你安裝完以上插件后，需要在main.js中進(jìn)行引入，例如引入全部:

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"
      }
    ]
  ]
}

當(dāng)你做完以上步驟后，你可能已經(jīng)迫不及待的想要運(yùn)行了，但是運(yùn)行后你會(huì)發(fā)現(xiàn)居然報(bào)錯(cuò)了，例如：

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

此時(shí)你需要安裝一下這個(gè)插件：

npm install async-validator@1.11.5

以上為直接在main.js中引入，下面是另外一種引入方式：

在 src 文件夾中新建我們的 element 文件夾，并在里面新建一個(gè) index.js 文件

在index文件中去書(shū)寫我們需要引入的部分組件

// 導(dǎo)入自己需要的組件
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)

這樣做更方便管理

補(bǔ)充：uniapp使用element的問(wèn)題

message失效問(wèn)題：

會(huì)報(bào)錯(cuò)：’error‘ is not undefind

一直在踩坑中…

解決如下：

在main.js中，給vue掛載實(shí)例：

將Vue.use()

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

替換為：

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

總結(jié)

到此這篇關(guān)于在uni-app中使用element-ui的方法與報(bào)錯(cuò)解決的文章就介紹到這了,更多相關(guān)uni-app使用element-ui內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: