0


在uni-app中使用element-ui

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)newVue({
  el:'#app',
  render: h =>h(App)})

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

npm install [email protected]

**安装完后需要配置一下

.babelrc

文件:**

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

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

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

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

npm install [email protected]

**以上为直接在

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)}}exportdefault element

**最后在

main.js

中引入该文件**

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

这样做更方便管理

标签: html5 elementui npm

本文转载自: https://blog.csdn.net/qq_39024950/article/details/118967174
版权归原作者 梦一场江南烟雨 所有, 如有侵权,请联系我们删除。

“在uni-app中使用element-ui”的评论:

还没有评论