Element安装环境以及第一个实例

搭配运行环境（vue和html两种），参考官网

下面会放上代码供参考

npm 安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i element-ui -S

CDN

目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>


我们建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来 Element 升级时受到非兼容性更新的影响

引入 Element

你可以引入整个 Element，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。

完整引入

在 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)
});

以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。

按需引入

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

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

接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});

完整组件列表和引入方式（完整组件列表以 components.json 为准）

import Vue from 'vue';
import {
  Pagination,
  Dialog,
  Autocomplete,
  Dropdown,
  DropdownMenu,
  DropdownItem,
  Menu,
  Submenu,
  MenuItem,
  MenuItemGroup,
  Input,
  InputNumber,
  Radio,
  RadioGroup,
  RadioButton,
  Checkbox,
  CheckboxButton,
  CheckboxGroup,
  Switch,
  Select,
  Option,
  OptionGroup,
  Button,
  ButtonGroup,
  Table,
  TableColumn,
  DatePicker,
  TimeSelect,
  TimePicker,
  Popover,
  Tooltip,
  Breadcrumb,
  BreadcrumbItem,
  Form,
  FormItem,
  Tabs,
  TabPane,
  Tag,
  Tree,
  Alert,
  Slider,
  Icon,
  Row,
  Col,
  Upload,
  Progress,
  Spinner,
  Badge,
  Card,
  Rate,
  Steps,
  Step,
  Carousel,
  CarouselItem,
  Collapse,
  CollapseItem,
  Cascader,
  ColorPicker,
  Transfer,
  Container,
  Header,
  Aside,
  Main,
  Footer,
  Timeline,
  TimelineItem,
  Link,
  Divider,
  Image,
  Calendar,
  Backtop,
  PageHeader,
  CascaderPanel,
  Loading,
  MessageBox,
  Message,
  Notification
} from 'element-ui';

Vue.use(Pagination);
Vue.use(Dialog);
Vue.use(Autocomplete);
Vue.use(Dropdown);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Menu);
Vue.use(Submenu);
Vue.use(MenuItem);
Vue.use(MenuItemGroup);
Vue.use(Input);
Vue.use(InputNumber);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(RadioButton);
Vue.use(Checkbox);
Vue.use(CheckboxButton);
Vue.use(CheckboxGroup);
Vue.use(Switch);
Vue.use(Select);
Vue.use(Option);
Vue.use(OptionGroup);
Vue.use(Button);
Vue.use(ButtonGroup);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(DatePicker);
Vue.use(TimeSelect);
Vue.use(TimePicker);
Vue.use(Popover);
Vue.use(Tooltip);
Vue.use(Breadcrumb);
Vue.use(BreadcrumbItem);
Vue.use(Form);
Vue.use(FormItem);
Vue.use(Tabs);
Vue.use(TabPane);
Vue.use(Tag);
Vue.use(Tree);
Vue.use(Alert);
Vue.use(Slider);
Vue.use(Icon);
Vue.use(Row);
Vue.use(Col);
Vue.use(Upload);
Vue.use(Progress);
Vue.use(Spinner);
Vue.use(Badge);
Vue.use(Card);
Vue.use(Rate);
Vue.use(Steps);
Vue.use(Step);
Vue.use(Carousel);
Vue.use(CarouselItem);
Vue.use(Collapse);
Vue.use(CollapseItem);
Vue.use(Cascader);
Vue.use(ColorPicker);
Vue.use(Transfer);
Vue.use(Container);
Vue.use(Header);
Vue.use(Aside);
Vue.use(Main);
Vue.use(Footer);
Vue.use(Timeline);
Vue.use(TimelineItem);
Vue.use(Link);
Vue.use(Divider);
Vue.use(Image);
Vue.use(Calendar);
Vue.use(Backtop);
Vue.use(PageHeader);
Vue.use(CascaderPanel);

Vue.use(Loading.directive);

Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;

全局配置

在引入 Element 时，可以传入一个全局配置对象。该对象目前支持 size 与 zIndex 字段。size 用于改变组件的默认尺寸，zIndex 设置弹框的初始 z-index（默认值：2000）。按照引入 Element 的方式，具体操作如下：

完整引入 Element：

import Vue from 'vue';
import Element from 'element-ui';
Vue.use(Element, { size: 'small', zIndex: 3000 });

按需引入 Element：

import Vue from 'vue';
import { Button } from 'element-ui';

Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
Vue.use(Button);

按照以上设置，项目中所有拥有 size 属性的组件的默认尺寸均为 'small'，弹框的初始 z-index 为 3000。



纯htmlcode：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<title></title>
</head>
<body>
<div id="app">
<el-button @click="visible = true">Button</el-button>
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>

<el-row>
<el-button plain>朴素按钮</el-button>
<el-button type="primary" plain>主要按钮</el-button>
<el-button type="success" plain>成功按钮</el-button>
<el-button type="info" plain>信息按钮</el-button>
<el-button type="warning" plain>警告按钮</el-button>
<el-button type="danger" plain>危险按钮</el-button>
</el-row>

<el-row>
<el-button round>圆角按钮</el-button>
<el-button type="primary" round>主要按钮</el-button>
<el-button type="success" round>成功按钮</el-button>
<el-button type="info" round>信息按钮</el-button>
<el-button type="warning" round>警告按钮</el-button>
<el-button type="danger" round>危险按钮</el-button>
</el-row>

<el-row>
<el-button icon="el-icon-search" circle></el-button>
<el-button type="primary" icon="el-icon-edit" circle></el-button>
<el-button type="success" icon="el-icon-check" circle></el-button>
<el-button type="info" icon="el-icon-message" circle></el-button>
<el-button type="warning" icon="el-icon-star-off" circle></el-button>
<el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>
<el-dialog :visible.sync="visible" title="Hello world">
<p>Try Element</p>
</el-dialog>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: function() {
return { visible: false }
}
})
</script>
</body>
</html>

vue的code：

###APP.vue

<el-row>

<el-button>默认按钮</el-button>

<el-button type="primary">主要按钮</el-button>

<el-button type="success">成功按钮</el-button>

<el-button type="info">信息按钮</el-button>

<el-button type="warning">警告按钮</el-button>

<el-button type="danger">危险按钮</el-button>

</el-row>

<el-row>

<el-button plain>朴素按钮</el-button>

<el-button type="primary" plain>主要按钮</el-button>

<el-button type="success" plain>成功按钮</el-button>

<el-button type="info" plain>信息按钮</el-button>

<el-button type="warning" plain>警告按钮</el-button>

<el-button type="danger" plain>危险按钮</el-button>

</el-row>

<el-row>

<el-button round>圆角按钮</el-button>

<el-button type="primary" round>主要按钮</el-button>

<el-button type="success" round>成功按钮</el-button>

<el-button type="info" round>信息按钮</el-button>

<el-button type="warning" round>警告按钮</el-button>

<el-button type="danger" round>危险按钮</el-button>

</el-row>

<el-row>

<el-button icon="el-icon-search" circle></el-button>

<el-button type="primary" icon="el-icon-edit" circle></el-button>

<el-button type="success" icon="el-icon-check" circle></el-button>

<el-button type="info" icon="el-icon-message" circle></el-button>

<el-button type="warning" icon="el-icon-star-off" circle></el-button>

<el-button type="danger" icon="el-icon-delete" circle></el-button>

</el-row>

<router-view/>

</div>

</template>

export default {

name: 'App'

}

</script>

<style>

</style>

###main.js

// The Vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from 'vue'

import App from './App'

import router from './router'

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

import {

Pagination,

Dialog,

Autocomplete,

Dropdown,

DropdownMenu,

DropdownItem,

Menu,

Submenu,

MenuItem,

MenuItemGroup,

Input,

InputNumber,

Radio,

RadioGroup,

RadioButton,

Checkbox,

CheckboxButton,

CheckboxGroup,

Switch,

Select,

Option,

OptionGroup,

Button,

ButtonGroup,

Table,

TableColumn,

DatePicker,

TimeSelect,

TimePicker,

Popover,

Tooltip,

Breadcrumb,

BreadcrumbItem,

Form,

FormItem,

Tabs,

TabPane,

Tag,

Tree,

Alert,

Slider,

Icon,

Row,

Col,

Upload,

Progress,

Spinner,

Badge,

Card,

Rate,

Steps,

Step,

Carousel,

CarouselItem,

Collapse,

CollapseItem,

Cascader,

ColorPicker,

Transfer,

Container,

Header,

Aside,

Main,

Footer,

Timeline,

TimelineItem,

Link,

Divider,

Image,

Calendar,

Backtop,

PageHeader,

CascaderPanel,

Loading,

MessageBox,

Message,

Notification

} from 'element-ui';

Vue.use(Pagination);

Vue.use(Dialog);

Vue.use(Autocomplete);

Vue.use(Dropdown);

Vue.use(DropdownMenu);

Vue.use(DropdownItem);

Vue.use(Menu);

Vue.use(Submenu);

Vue.use(MenuItem);

Vue.use(MenuItemGroup);

Vue.use(Input);

Vue.use(InputNumber);

Vue.use(Radio);

Vue.use(RadioGroup);

Vue.use(RadioButton);

Vue.use(Checkbox);

Vue.use(CheckboxButton);

Vue.use(CheckboxGroup);

Vue.use(Switch);

Vue.use(Select);

Vue.use(Option);

Vue.use(OptionGroup);

Vue.use(Button);

Vue.use(ButtonGroup);

Vue.use(Table);

Vue.use(TableColumn);

Vue.use(DatePicker);

Vue.use(TimeSelect);

Vue.use(TimePicker);

Vue.use(Popover);

Vue.use(Tooltip);

Vue.use(Breadcrumb);

Vue.use(BreadcrumbItem);

Vue.use(Form);

Vue.use(FormItem);

Vue.use(Tabs);

Vue.use(TabPane);

Vue.use(Tag);

Vue.use(Tree);

Vue.use(Alert);

Vue.use(Slider);

Vue.use(Icon);

Vue.use(Row);

Vue.use(Col);

Vue.use(Upload);

Vue.use(Progress);

Vue.use(Spinner);

Vue.use(Badge);

Vue.use(Card);

Vue.use(Rate);

Vue.use(Steps);

Vue.use(Step);

Vue.use(Carousel);

Vue.use(CarouselItem);

Vue.use(Collapse);

Vue.use(CollapseItem);

Vue.use(Cascader);

Vue.use(ColorPicker);

Vue.use(Transfer);

Vue.use(Container);

Vue.use(Header);

Vue.use(Aside);

Vue.use(Main);

Vue.use(Footer);

Vue.use(Timeline);

Vue.use(TimelineItem);

Vue.use(Link);

Vue.use(Divider);

Vue.use(Image);

Vue.use(Calendar);

Vue.use(Backtop);

Vue.use(PageHeader);

Vue.use(CascaderPanel);

Vue.use(Loading.directive);

Vue.prototype.$loading = Loading.service;

Vue.prototype.$msgbox = MessageBox;

Vue.prototype.$alert = MessageBox.alert;

Vue.prototype.$confirm = MessageBox.confirm;

Vue.prototype.$prompt = MessageBox.prompt;

Vue.prototype.$notify = Notification;

Vue.prototype.$message = Message;

Vue.use(ElementUI);

Vue.config.productionTip = false

/* eslint-disable no-new */

new Vue({

el: '#app',

router,

components: { App },

template: '<App/>'

})

posted @ 2019-08-26 17:46 阿蒙不萌阅读(331) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

阿蒙不萌

Element安装环境以及第一个实例

搭配运行环境（vue和html两种），参考官网

npm 安装

CDN

引入 Element

完整引入

按需引入

全局配置

公告