2020-08-13 15:18:26 +08:00
## 快速上手
本节将介绍如何在项目中使用 Element。
2020-10-26 17:16:22 +08:00
### 使用 vue-cli@4.5
2020-08-13 15:18:26 +08:00
2020-10-26 17:16:22 +08:00
我们为新版的 vue-cli 准备了相应的 [Element Plus 插件 ](https://github.com/element-plus/vue-cli-plugin-element-plus ),你可以用它们快速地搭建一个基于 Element Plus 的项目。
2020-08-13 15:18:26 +08:00
### 使用 Starter Kit
2020-10-27 18:26:07 +08:00
我们提供了通用的[项目模板](https://github.com/element-plus/element-plus-starter),你可以直接使用,另外我们还提供了 Vite [模板 ](https://github.com/element-plus/element-plus-vite-starter )。对于 Laravel 用户,我们也准备了相应的[模板](https://github.com/element-plus/element-plus-in-laravel-starter),同样可以直接下载使用。
2020-08-13 15:18:26 +08:00
如果不希望使用我们提供的模板,请继续阅读。
2020-10-16 11:14:34 +08:00
### 引入 Element Plus
2020-08-13 15:18:26 +08:00
2020-10-16 11:14:34 +08:00
你可以引入整个 Element Plus, 或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。
2020-08-13 15:18:26 +08:00
#### 完整引入
在 main.js 中写入以下内容:
```javascript
2020-11-23 16:28:06 +08:00
import { createApp } from 'vue'
2020-10-16 11:14:34 +08:00
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
2020-08-13 15:18:26 +08:00
import App from './App.vue';
2020-10-16 11:14:34 +08:00
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
2020-08-13 15:18:26 +08:00
```
2020-10-16 11:14:34 +08:00
以上代码便完成了 Element Plus 的引入。需要注意的是,样式文件需要单独引入。
2020-08-13 15:18:26 +08:00
#### 按需引入
借助 [babel-plugin-component ](https://github.com/QingWei-Li/babel-plugin-component ),我们可以只引入需要的组件,以达到减小项目体积的目的。
首先,安装 babel-plugin-component:
```bash
npm install babel-plugin-component -D
```
然后,将 .babelrc 修改为:
```json
{
"plugins": [
[
"component",
{
2020-10-16 11:14:34 +08:00
"libraryName": "element-plus",
2020-08-13 15:18:26 +08:00
"styleLibraryName": "theme-chalk"
}
]
]
}
```
接下来,如果你只希望引入部分组件,比如 Button 和 Select, 那么需要在 main.js 中写入以下内容:
```javascript
2020-11-23 16:28:06 +08:00
import { createApp } from 'vue'
import { ElButton, ElSelect } from 'element-plus';
2020-08-13 15:18:26 +08:00
import App from './App.vue';
2020-11-23 16:28:06 +08:00
const app = createApp(App)
app.component(ElButton.name, ElButton);
app.component(ElSelect.name, ElSelect);
/* or
* app.use(ElButton)
* app.use(ElSelect)
2020-08-13 15:18:26 +08:00
*/
2020-11-23 16:28:06 +08:00
app.mount('#app')
2020-08-13 15:18:26 +08:00
```
2020-11-23 16:28:06 +08:00
完整组件列表和引入方式(完整组件列表以 [reference ](https://github.com/element-plus/element-plus/tree/dev/packages ) 为准)
2020-08-13 15:18:26 +08:00
```javascript
2020-11-23 16:28:06 +08:00
import { createApp } from 'vue'
import App from './App.vue';
2020-08-13 15:18:26 +08:00
import {
2020-11-23 16:28:06 +08:00
ElAlert,
ElAside,
ElAutocomplete,
ElAvatar,
ElBacktop,
ElBadge,
ElBreadcrumb,
ElBreadcrumbItem,
ElButton,
ElButtonGroup,
ElCalendar,
ElCard,
ElCarousel,
ElCarouselItem,
ElCascader,
ElCascaderPanel,
ElCheckbox,
ElCheckboxButton,
ElCheckboxGroup,
ElCol,
ElCollapse,
ElCollapseItem,
ElCollapseTransition,
ElColorPicker,
ElContainer,
ElDatePicker,
ElDialog,
ElDivider,
ElDrawer,
ElDropdown,
ElDropdownItem,
ElDropdownMenu,
ElFooter,
ElForm,
ElFormItem,
ElHeader,
ElIcon,
ElImage,
ElInput,
ElInputNumber,
ElLink,
ElMain,
ElMenu,
ElMenuItem,
ElMenuItemGroup,
ElOption,
ElOptionGroup,
ElPageHeader,
ElPagination,
ElPopconfirm,
ElPopover,
ElPopper,
ElProgress,
ElRadio,
ElRadioButton,
ElRadioGroup,
ElRate,
ElRow,
ElScrollBar,
ElSelect,
ElSlider,
ElStep,
ElSteps,
ElSubmenu,
ElSwitch,
ElTabPane,
ElTable,
ElTableColumn,
ElTimeline,
ElTimelineItem,
ElTooltip,
ElTransfer,
ElTree,
ElUpload,
ElInfiniteScroll,
ElLoading,
ElMessage,
ElMessageBox,
ElNotification,
2020-10-16 11:14:34 +08:00
} from 'element-plus';
2020-08-13 15:18:26 +08:00
2020-11-23 16:28:06 +08:00
const components = [
ElAlert,
ElAside,
ElAutocomplete,
ElAvatar,
ElBacktop,
ElBadge,
ElBreadcrumb,
ElBreadcrumbItem,
ElButton,
ElButtonGroup,
ElCalendar,
ElCard,
ElCarousel,
ElCarouselItem,
ElCascader,
ElCascaderPanel,
ElCheckbox,
ElCheckboxButton,
ElCheckboxGroup,
ElCol,
ElCollapse,
ElCollapseItem,
ElCollapseTransition,
ElColorPicker,
ElContainer,
ElDatePicker,
ElDialog,
ElDivider,
ElDrawer,
ElDropdown,
ElDropdownItem,
ElDropdownMenu,
ElFooter,
ElForm,
ElFormItem,
ElHeader,
ElIcon,
ElImage,
ElInput,
ElInputNumber,
ElLink,
ElMain,
ElMenu,
ElMenuItem,
ElMenuItemGroup,
ElOption,
ElOptionGroup,
ElPageHeader,
ElPagination,
ElPopconfirm,
ElPopover,
ElPopper,
ElProgress,
ElRadio,
ElRadioButton,
ElRadioGroup,
ElRate,
ElRow,
ElScrollBar,
ElSelect,
ElSlider,
ElStep,
ElSteps,
ElSubmenu,
ElSwitch,
ElTabPane,
ElTable,
ElTableColumn,
ElTabs,
ElTag,
ElTimePicker,
ElTimeSelect,
ElTimeline,
ElTimelineItem,
ElTooltip,
ElTransfer,
ElTree,
ElUpload,
]
const plugins = [
ElInfiniteScroll,
ElLoading,
ElMessage,
ElMessageBox,
ElNotification,
]
const app = createApp(App)
components.forEach(component => {
app.component(component.name, component)
})
plugins.forEach(plugin => {
app.use(plugin)
})
2020-08-13 15:18:26 +08:00
```
### 全局配置
2020-10-16 11:14:34 +08:00
在引入 Element Plus 时,可以传入一个全局配置对象。该对象目前支持 `size` 与 `zIndex` 字段。`size` 用于改变组件的默认尺寸,`zIndex` 设置弹框的初始 z-index( 默认值: 2000) 。按照引入 Element Plus 的方式,具体操作如下:
2020-08-13 15:18:26 +08:00
完整引入 Element:
```js
2020-11-23 16:28:06 +08:00
import { createApp } from 'vue'
2020-10-16 11:19:36 +08:00
import ElementPlus from 'element-plus';
2020-11-23 16:28:06 +08:00
import App from './App.vue';
const app = createApp(App)
app.use(ElementPlus, { size: 'small', zIndex: 3000 });
2020-08-13 15:18:26 +08:00
```
按需引入 Element:
```js
2020-11-23 16:28:06 +08:00
import { createApp } from 'vue'
import { ElButton } from 'element-plus';
import App from './App.vue';
2020-08-13 15:18:26 +08:00
2020-11-23 16:28:06 +08:00
const app = createApp(App)
app.config.globalProperties.$ELEMENT = option
app.use(ElButton);
2020-08-13 15:18:26 +08:00
```
按照以上设置,项目中所有拥有 `size` 属性的组件的默认尺寸均为 'small',弹框的初始 z-index 为 3000。
### 开始使用
2020-10-16 11:14:34 +08:00
至此,一个基于 Vue 和 Element Plus 的开发环境已经搭建完毕,现在就可以编写代码了。各个组件的使用方法请参阅它们各自的文档。
2020-08-13 15:18:26 +08:00
### 使用 Nuxt.js
我们还可以使用 [Nuxt.js ](https://nuxtjs.org ):
< div class = "glitch-embed-wrap" style = "height: 420px; width: 100%;" >
< iframe src = "https://glitch.com/embed/#!/embed/nuxt-with-element?path=nuxt.config.js&previewSize=0&attributionHidden=true" alt = "nuxt-with-element on glitch" style = "height: 100%; width: 100%; border: 0;" > < / iframe >
< / div >