在uni-app中使用element-ui的方法與報錯解決
uni-app的相關(guān)UI組件庫中可能會沒有你想要的功能組件，自己去開發(fā)的話需要花很多時間，此時咱們可以將別的UI組件庫給安裝到uni-app中來，達(dá)到直接使用該UI組件庫的功能組件，例如，安裝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)迫不及待的想要運行了，但是運行后你會發(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)
這樣做更方便管理
補(bǔ)充：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)文章
vue-cli3+typescript新建一個項目的思路分析
這篇文章主要介紹了vue-cli3+typescript新建一個項目的思路，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
vue-router跳轉(zhuǎn)方式的區(qū)別解析
在Vue中，router-link稱為聲明式路由，:to綁定為跳轉(zhuǎn)的目標(biāo)地址，一種是通過name，另一種是path，這篇文章主要介紹了vue-router跳轉(zhuǎn)方式的區(qū)別,需要的朋友可以參考下2022-12-12
vue2.0 與 bootstrap datetimepicker的結(jié)合使用實例
本篇文章主要介紹了vue2.0 與 bootstrap datetimepicker的結(jié)合使用實例，非常具有實用價值，需要的朋友可以參考下2017-05-05
VUE渲染后端返回含有script標(biāo)簽的html字符串示例
今天小編就為大家分享 一篇VUE渲染后端返回含有script標(biāo)簽的html字符串示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
Vue中el-tree樹全部展開或收起的實現(xiàn)示例
本文主要介紹了Vue中el-tree樹全部展開或收起的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
這篇文章主要介紹了Vue 固定頭 固定列 點擊表頭可排序的表格組件的相關(guān)資料,需要的朋友可以參考下2016-11-11
在Vue 3.0中,與2.0版本相比有一定的差別,最明顯的就是缺少了build、config文件夾,下面這篇文章主要給大家介紹了關(guān)于vue3中vue.config.js配置及注釋的相關(guān)資料,需要的朋友可以參考下2022-08-08
Props傳參v-for后TS報錯對象類型是unknow的解決方案
這篇文章主要介紹了Props傳參v-for后TS報錯對象類型是unknow的解決方案,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03
vue中使用window.open()參數(shù)示例詳解
這篇文章主要介紹了vue中使用window.open()參數(shù)詳解,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
require.context是webpack提供的一個api,通常用于批量注冊組件,下面這篇文章主要給大家介紹了關(guān)于vue?require.context()用法的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04