使用 Starter Kit

我们提供了通用的项目模板，你可以直接使用。对于 Laravel 用户，我们也准备了相应的模板，同样可以直接下载使用。

如果不希望使用我们提供的模板，请继续阅读。

¶使用 vue-cli

我们还可以使用 vue-cli 初始化项目，命令如下：

> npm i -g vue-cli> mkdir my-project && cd my-project> vue init webpack> npm i && npm i element-ui¶引入 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,  Badge,  Card,  Rate,  Steps,  Step,  Carousel,  CarouselItem,  Collapse,  CollapseItem,  Cascader,  ColorPicker,  Transfer,  Container,  Header,  Aside,  Main,  Footer,  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(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(Container)Vue.use(Header)Vue.use(Aside)Vue.use(Main)Vue.use(Footer)Vue.use(Loading.directive)Vue.prototype.$loading = Loading.serviceVue.prototype.$msgbox = MessageBoxVue.prototype.$alert = MessageBox.alertVue.prototype.$confirm = MessageBox.confirmVue.prototype.$prompt = MessageBox.promptVue.prototype.$notify = NotificationVue.prototype.$message = Message¶全局配置

在引入 Element 时，可以传入一个全局配置对象。该对象目前仅支持 size 字段，用于改变组件的默认尺寸。按照引入 Element 的方式，具体操作如下：

完整引入 Element：

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

按需引入 Element：

import Vue from 'vue'import { Button } from 'element-ui'Vue.prototype.$ELEMENT = { size: 'small' }Vue.use(Button)

按照以上设置，项目中所有拥有 size 属性的组件的默认尺寸均为 'small'。

¶开始使用

至此，一个基于 Vue 和 Element 的开发环境已经搭建完毕，现在就可以编写代码了。启动开发模式：

# 执行如下命令后访问 localhost:8086npm run dev

编译：

npm run build

各个组件的使用方法请参阅它们各自的文档。

使用 Starter Kit

我们提供了通用的项目模板，你可以直接使用。对于 Laravel 用户，我们也准备了相应的模板，同样可以直接下载使用。

如果不希望使用我们提供的模板，请继续阅读。

¶使用 vue-cli

我们还可以使用 vue-cli 初始化项目，命令如下：

> npm i -g vue-cli> mkdir my-project && cd my-project> vue init webpack> npm i && npm i element-ui¶引入 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,  Badge,  Card,  Rate,  Steps,  Step,  Carousel,  CarouselItem,  Collapse,  CollapseItem,  Cascader,  ColorPicker,  Transfer,  Container,  Header,  Aside,  Main,  Footer,  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(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(Container)Vue.use(Header)Vue.use(Aside)Vue.use(Main)Vue.use(Footer)Vue.use(Loading.directive)Vue.prototype.$loading = Loading.serviceVue.prototype.$msgbox = MessageBoxVue.prototype.$alert = MessageBox.alertVue.prototype.$confirm = MessageBox.confirmVue.prototype.$prompt = MessageBox.promptVue.prototype.$notify = NotificationVue.prototype.$message = Message¶全局配置

在引入 Element 时，可以传入一个全局配置对象。该对象目前仅支持 size 字段，用于改变组件的默认尺寸。按照引入 Element 的方式，具体操作如下：

完整引入 Element：

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

按需引入 Element：

import Vue from 'vue'import { Button } from 'element-ui'Vue.prototype.$ELEMENT = { size: 'small' }Vue.use(Button)

按照以上设置，项目中所有拥有 size 属性的组件的默认尺寸均为 'small'。

¶开始使用

至此，一个基于 Vue 和 Element 的开发环境已经搭建完毕，现在就可以编写代码了。启动开发模式：

# 执行如下命令后访问 localhost:8086npm run dev

编译：

npm run build

各个组件的使用方法请参阅它们各自的文档。