elementUI 的基本使用

elementUI 的基本使用

elementUI 是一款使用简单、功能齐全的 PC 端 UI 库，配合 Vue 使用能极大的加快我们的开发效率，来面就让我们来简单学习一下吧！！！

• 项目本地安装 element-ui

  $ npm install element-ui -S
  

• 在 main.js 文件中引入 UI 库核心模块与它的样式

  import Vue from 'vue'
  import App from './App.vue'
  
  // 引入 element-ui 和 它的样式文件
  import ElementUi from 'element-ui'
  import 'element-ui/lib/theme-chalk/index.css'
  
  // 调用 ElementUi
  Vue.use(ElementUi)
  

• 现在就可以直接使用里面的组件了，具体组件去官网查看，官网地址

注意：这里使用的是全局加载，elementui 中的任何组件都可以使用，但是有时我们需要按需加载，不需要引入整个 UI 库文件了

elementUI 按需加载

• 项目中然需要安装 element-ui

  $ npm install element-ui -S
  

• 安装 babel 相关依赖插件

  $ npm install babel-plugin-component -D
  

• 配置 babel 相关的配置文件 （具体看文档）

  // 在 babel.config.js 文件中添加如下配置
  "plugins": [
      [
        "component",
        {
          "libraryName": "element-ui",
          "styleLibraryName": "theme-chalk"
        }
      ]
    ]
  

• 在 main.js 文件中就不需要全局引入了

• 在需要用到 UI 库的组件中按需引入即可

  // 按类似解构的形式按需引入
  import { Select, Button } from 'element-ui'
  
  // 注册为全局组件
  Vue.component(Select.name, Select)
  Vue.component(Button.name, Button)
  
  // 注册为局部组件
  export default {
      components: {
          [Select.name]: Select,
          [Button.name]: Button
      }
  }