在uni-app中使用element-ui

电玩女神 2022-08-30 15:52 344阅读 0赞

**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)

这样做更方便管理