element-plus/website/docs/jp/quickstart.md

312 lines
6.8 KiB
Markdown
Raw Normal View History

2020-11-04 10:30:14 +08:00
## クイックスタート
2020-11-20 23:02:15 +08:00
このパートでは、webpackプロジェクトでElement Plusを用いた開発プロセスを説明します。
2020-11-04 10:30:14 +08:00
### vue-cli@4.5を使う
2020-11-20 23:02:15 +08:00
私達はvue-cli@4.5のために [Element Plus plugin](https://github.com/element-plus/vue-cli-plugin-element-plus) 提供しており, 簡単に Element Plusベースのプロジェクトを構築出来ます。
2020-11-04 10:30:14 +08:00
### スターターキットを使う
私達は一般的なツール[project template](https://github.com/element-plus/element-plus-starter) があります。 直接ダウンロードして使うことが出来ます。
これらのツールを使いたくない場合は、以下の記事を御覧ください。
### Element Plusをインポートする
2020-11-20 23:02:15 +08:00
Element Plusを完全にインポートすることも、必要なものだけをインポートすることもできます。完全なインポートから始めましょう。
2020-11-04 10:30:14 +08:00
#### 完全にインポートした場合
main.js:
```javascript
2020-11-23 16:28:06 +08:00
import { createApp } from 'vue'
2020-11-04 10:30:14 +08:00
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')
```
2020-11-20 23:02:15 +08:00
上記のコードは完全にElement Plusをインポートします。CSSファイルは個別にインポートする必要があることを注意してください。
2020-11-04 10:30:14 +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",
{
"libraryName": "element-plus",
"styleLibraryName": "theme-chalk"
}
]
]
}
```
次に、ボタンとセレクトが必要な場合、main.jsを編集します:
```javascript
2020-11-23 16:28:06 +08:00
import { createApp } from 'vue'
import { ElButton, ElSelect } from 'element-plus';
2020-11-04 10:30:14 +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);
2020-11-04 10:30:14 +08:00
/* or
2020-11-23 16:28:06 +08:00
* app.use(ElButton)
* app.use(ElSelect)
2020-11-04 10:30:14 +08:00
*/
2020-11-23 16:28:06 +08:00
app.mount('#app')
2020-11-04 10:30:14 +08:00
```
2020-11-23 16:28:06 +08:00
全ての例 (コンポーネントリストのリファレンスは [reference](https://github.com/element-plus/element-plus/tree/dev/packages) を御覧ください)
2020-11-04 10:30:14 +08:00
```javascript
2020-11-23 16:28:06 +08:00
import { createApp } from 'vue'
import App from './App.vue';
2020-11-04 10:30:14 +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,
2020-12-01 19:14:11 +08:00
ElTabs,
ElTag,
ElTimePicker,
ElTimeSelect,
2020-11-23 16:28:06 +08:00
ElTimeline,
ElTimelineItem,
ElTooltip,
ElTransfer,
ElTree,
ElUpload,
ElInfiniteScroll,
ElLoading,
ElMessage,
ElMessageBox,
ElNotification,
2020-11-04 11:15:05 +08:00
} from 'element-plus';
2020-11-04 10:30:14 +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-11-04 10:30:14 +08:00
```
### グローバルコンフィグ
Elenentをインポートする際、グローバルコンフィグオブジェクトを定義出来ます。現時点では2つのプロパティ: `size``zIndex` があります。 プロパティ `size` はすべてのコンポーネントのデフォルトサイズ、プロパティ `zIndex` はモーダルボックスの初期の z-index (デフォルト: 2000) を設定します。
2020-11-20 23:02:15 +08:00
Element Plusを完全にインポート
2020-11-04 10:30:14 +08:00
```js
2020-11-23 16:28:06 +08:00
import { createApp } from 'vue'
2020-11-04 10:30:14 +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-11-04 10:30:14 +08:00
```
2020-11-20 23:02:15 +08:00
Element Plusを部分的にインポート
2020-11-04 10:30:14 +08:00
```js
2020-11-23 16:28:06 +08:00
import { createApp } from 'vue'
import { ElButton } from 'element-plus';
import App from './App.vue';
2020-11-04 10:30:14 +08:00
2020-11-23 16:28:06 +08:00
const app = createApp(App)
app.config.globalProperties.$ELEMENT = option
app.use(ElButton);
2020-11-04 10:30:14 +08:00
```
上記の設定では、size属性を持つすべてのコンポーネントのデフォルトのサイズは `small`、モーダルボックスのデフォルト値 `z-index` は3000となります。
### コーディングを始めましょう
2020-11-20 23:02:15 +08:00
プロジェクトに Vue と Element Plus を実装したので、いよいよコードを書く時が来ました。使用方法については、各コンポーネントのドキュメントを参照してください。
2020-11-04 10:30:14 +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>