在Vue中使用Element

在e:\vue\2020.4.3中，已创建vue项目。

但还没有下载element-ui，在e:\vue\2020.4.3中，输入npm install --save element-ui，回车，自动安装。

然后，在e:\vue\2020.4.3目录下，输入cnpm run dev，然后根据提示复制到浏览器中运行即可使用element-ui了。

 

 

有时候项目中只用到ElementUI中的几个组件，全局引入会增加项目体积，所以按需引入更合适。

//引入按钮组件（Button）和下拉选择器组件（Select）
import { Button, Select } from 'element-ui';
//将引入的组件注册为全局Vue组件
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);

/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

使用已注册的组件

<template>
  <div id="app">
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>      
  </div>
</template>

其他组件基本与上面引入方法类似，不过也有区别，官网也有介绍，大部分组件都是以import { XXXX } from 'element-ui'的方式引入，然后以Vue.component(XXX.name, XXX);或者Vue.use(XXX)的方式注册，当然也有例外，