element-ui 在vue中使用的几种方式

1. 在vue2x脚手架的环境下安装并使用 element-ui

1. 安装依赖 cnpm i element-ui -S
2. 在main.js中使用

代码语言：javascript复制

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

1. 组件中测试

代码语言：javascript复制

<template>
  <div class="hello">
      <el-button type="primary">点我</el-button>
  </div>
</template>

2. 在vue3x脚手架的环境下安装并使用 element-ui

1. 安装依赖 vue add element
2. 所有的都点击是

3. 按需加载 element-ui

element ui 是比较大的组件库，打包后接近800KB很占内存，一般采用按需加载的方式

1. 安装 babel-plugin-component 插件 cnpm i babel-plugin-component -D
2. 配置babel.config.js

代码语言：javascript复制

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

1. 组件中使用 此处注意：如果是组件的情况，需要在组件的components中注册，或者在main.js中Vue.component()注册成全局组件

代码语言：javascript复制

import { Button, Message } from 'element-ui'

javascript babel.js npm vue.js

0 人点赞