在uni-app中使用element-ui的方法與報錯解決
uni-app的相關(guān)UI組件庫中可能會沒有你想要的功能組件，自己去開發(fā)的話需要花很多時間，此時咱們可以將別的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"
}
]
]
}
當你做完以上步驟后，你可能已經(jīng)迫不及待的想要運行了，但是運行后你會發(fā)現(xiàn)居然報錯了，例如：
Cannot find module ‘core-js/library/fn/object/assign
此時你需要安裝一下這個插件：
npm install async-validator@1.11.5
以上為直接在main.js中引入，下面是另外一種引入方式：
在 src 文件夾中新建我們的 element 文件夾，并在里面新建一個 index.js 文件
在index文件中去書寫我們需要引入的部分組件
// 導(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)
這樣做更方便管理
補充：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;
總結(jié)
到此這篇關(guān)于在uni-app中使用element-ui的方法與報錯解決的文章就介紹到這了,更多相關(guān)uni-app使用element-ui內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
今天小編就為大家分享一篇關(guān)于vue中的mvvm模式講解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
這篇文章主要為大家詳細介紹了Vue3中useLocalStorage用法的相關(guān)知識,文中的示例代碼講解詳細,具有一定的學(xué)習(xí)價值,感興趣的小伙伴可以了解一下2023-10-10
這篇文章主要為大家詳細介紹了vue-table實現(xiàn)添加和刪除，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章主要介紹了Vue彈窗的兩種實現(xiàn)方式,一種使用.sync修飾符另一種使用v-model，本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-08-08
Vue3 directive自定義指令內(nèi)部實現(xiàn)示例
這篇文章主要為大家介紹了Vue3 directive自定義指令內(nèi)部實現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
vue+element-ui實現(xiàn)表格編輯的三種實現(xiàn)方式
這篇文章主要介紹了vue+element-ui實現(xiàn)表格編輯的三種實現(xiàn)方式，主要有表格內(nèi)部顯示和編輯切換，通過彈出另外一個表格編輯和直接通過樣式控制三種方式，感興趣的小伙伴們可以參考一下2018-10-10
Vue?nextTick獲取更新后的DOM的實現(xiàn)
本文主要介紹了Vue?nextTick獲取更新后的DOM的實現(xiàn)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
本篇文章主要介紹了基于Vue2x的圖片預(yù)覽插件的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要介紹了Vue.use()的作用及原理解析，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
本篇文章主要介紹了Vue中組件數(shù)據(jù)的傳遞的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09