mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-16 02:11:48 +08:00
431 lines
8.9 KiB
Markdown
431 lines
8.9 KiB
Markdown
## 快速上手
|
||
|
||
本节将介绍如何在项目中使用 Element。
|
||
|
||
### 使用 vue-cli@4.5
|
||
|
||
我们为新版的 vue-cli 准备了相应的 [Element Plus 插件](https://github.com/element-plus/vue-cli-plugin-element-plus)，你可以用它们快速地搭建一个基于 Element Plus 的项目。
|
||
|
||
### 使用 Starter Kit
|
||
|
||
我们提供了通用的[项目模板](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)，同样可以直接下载使用。
|
||
|
||
如果不希望使用我们提供的模板，请继续阅读。
|
||
|
||
### 引入 Element Plus
|
||
|
||
你可以引入整个 Element Plus，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。
|
||
|
||
#### 完整引入
|
||
|
||
在 main.js 中写入以下内容：
|
||
|
||
```javascript
|
||
import { createApp } from 'vue'
|
||
import ElementPlus from 'element-plus';
|
||
import 'element-plus/lib/theme-chalk/index.css';
|
||
import App from './App.vue';
|
||
|
||
const app = createApp(App)
|
||
app.use(ElementPlus)
|
||
app.mount('#app')
|
||
```
|
||
|
||
以上代码便完成了 Element Plus 的引入。需要注意的是，样式文件需要单独引入。
|
||
|
||
#### 按需引入
|
||
|
||
**Vue CLI**
|
||
|
||
借助 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)，我们可以只引入需要的组件，以达到减小项目体积的目的。
|
||
|
||
首先，安装 babel-plugin-import:
|
||
|
||
```bash
|
||
$ npm install babel-plugin-import -D
|
||
```
|
||
|
||
或者
|
||
|
||
```bash
|
||
$ yarn add babel-plugin-import -D
|
||
```
|
||
|
||
然后，将 babel.config.js 修改为：
|
||
|
||
- 引入 `.scss` 样式
|
||
|
||
:::warning
|
||
请确保已经安装了 `sass` 和 `sass-loader` 依赖并将 `element-plus/packages/theme-chalk/src/base.scss` 文件在入口文件中引入
|
||
:::
|
||
|
||
```js
|
||
module.exports = {
|
||
plugins: [
|
||
[
|
||
"import",
|
||
{
|
||
libraryName: 'element-plus',
|
||
customStyleName: (name) => {
|
||
name = name.slice(3)
|
||
return `element-plus/packages/theme-chalk/src/${name}.scss`;
|
||
},
|
||
},
|
||
],
|
||
],
|
||
};
|
||
```
|
||
|
||
- 引入 `.css` 样式
|
||
|
||
```js
|
||
module.exports = {
|
||
plugins: [
|
||
[
|
||
"import",
|
||
{
|
||
libraryName: 'element-plus',
|
||
customStyleName: (name) => {
|
||
return `element-plus/lib/theme-chalk/${name}.css`;
|
||
},
|
||
},
|
||
],
|
||
],
|
||
};
|
||
```
|
||
|
||
**Vite**
|
||
|
||
首先，安装 [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import):
|
||
|
||
```bash
|
||
$ npm install vite-plugin-style-import -D
|
||
```
|
||
|
||
或者
|
||
|
||
```bash
|
||
$ yarn add vite-plugin-style-import -D
|
||
```
|
||
|
||
然后，将 vite.config.js 修改为：
|
||
|
||
- 引入 `.scss` 样式
|
||
|
||
:::warning
|
||
请确保已经安装了 `sass` 依赖并将 `element-plus/packages/theme-chalk/src/base.scss` 文件在入口文件中引入
|
||
:::
|
||
|
||
```js
|
||
import { defineConfig } from 'vite'
|
||
import vue from '@vitejs/plugin-vue'
|
||
import styleImport from 'vite-plugin-style-import'
|
||
|
||
export default defineConfig({
|
||
plugins: [
|
||
vue(),
|
||
styleImport({
|
||
libs: [{
|
||
libraryName: 'element-plus',
|
||
esModule: true,
|
||
ensureStyleFile: true,
|
||
resolveStyle: (name) => {
|
||
name = name.slice(3)
|
||
return `element-plus/packages/theme-chalk/src/${name}.scss`;
|
||
},
|
||
resolveComponent: (name) => {
|
||
return `element-plus/lib/${name}`;
|
||
},
|
||
}]
|
||
})
|
||
]
|
||
})
|
||
```
|
||
|
||
- 引入 `.css` 样式
|
||
|
||
```js
|
||
import { defineConfig } from 'vite'
|
||
import vue from '@vitejs/plugin-vue'
|
||
import styleImport from 'vite-plugin-style-import'
|
||
|
||
export default defineConfig({
|
||
plugins: [
|
||
vue(),
|
||
styleImport({
|
||
libs: [
|
||
{
|
||
libraryName: 'element-plus',
|
||
esModule: true,
|
||
ensureStyleFile: true,
|
||
resolveStyle: (name) => {
|
||
return `element-plus/lib/theme-chalk/${name}.css`;
|
||
},
|
||
resolveComponent: (name) => {
|
||
return `element-plus/lib/${name}`;
|
||
},
|
||
}
|
||
]
|
||
})
|
||
]
|
||
})
|
||
```
|
||
|
||
接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：
|
||
|
||
```javascript
|
||
import { createApp } from 'vue'
|
||
import { ElButton, ElSelect } from 'element-plus';
|
||
import App from './App.vue';
|
||
// 如果要使用.scss样式文件，则需要引入base.scss文件
|
||
// import 'element-plus/packages/theme-chalk/src/base.scss'
|
||
|
||
const app = createApp(App)
|
||
app.component(ElButton.name, ElButton);
|
||
app.component(ElSelect.name, ElSelect);
|
||
|
||
/* or
|
||
* app.use(ElButton)
|
||
* app.use(ElSelect)
|
||
*/
|
||
|
||
app.mount('#app')
|
||
```
|
||
|
||
完整组件列表和引入方式（完整组件列表以 [reference](https://github.com/element-plus/element-plus/tree/dev/packages) 为准）
|
||
|
||
```javascript
|
||
import { createApp } from 'vue'
|
||
import App from './App.vue';
|
||
// 如果要使用.scss样式文件，则需要引入base.scss文件
|
||
// import 'element-plus/packages/theme-chalk/src/base.scss'
|
||
|
||
import {
|
||
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,
|
||
ElInfiniteScroll,
|
||
ElLoading,
|
||
ElMessage,
|
||
ElMessageBox,
|
||
ElNotification,
|
||
} from 'element-plus';
|
||
|
||
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)
|
||
})
|
||
```
|
||
|
||
### 全局配置
|
||
|
||
在引入 Element Plus 时，可以传入一个全局配置对象。该对象目前支持 `size` 与 `zIndex` 字段。`size` 用于改变组件的默认尺寸，`zIndex` 设置弹框的初始 z-index（默认值：2000）。按需引入 Element Plus 的方式，具体操作如下：
|
||
|
||
完整引入 Element：
|
||
|
||
```js
|
||
import { createApp } from 'vue'
|
||
import ElementPlus from 'element-plus';
|
||
import App from './App.vue';
|
||
|
||
const app = createApp(App)
|
||
app.use(ElementPlus, { size: 'small', zIndex: 3000 });
|
||
```
|
||
|
||
按需引入 Element：
|
||
|
||
```js
|
||
import { createApp } from 'vue'
|
||
import { ElButton } from 'element-plus';
|
||
import App from './App.vue';
|
||
// 如果要使用.scss样式文件，则需要引入base.scss文件
|
||
// import 'element-plus/packages/theme-chalk/src/base.scss'
|
||
|
||
const app = createApp(App)
|
||
app.config.globalProperties.$ELEMENT = option
|
||
app.use(ElButton);
|
||
```
|
||
|
||
按照以上设置，项目中所有拥有 `size` 属性的组件的默认尺寸均为 'small'，弹框的初始 z-index 为 3000。
|
||
|
||
### 开始使用
|
||
|
||
至此，一个基于 Vue 和 Element Plus 的开发环境已经搭建完毕，现在就可以编写代码了。各个组件的使用方法请参阅它们各自的文档。
|
||
|
||
### 使用 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>
|