diff --git a/website/docs/en-US/quickstart.md b/website/docs/en-US/quickstart.md
index d8ed56f68c..32e172b37c 100644
--- a/website/docs/en-US/quickstart.md
+++ b/website/docs/en-US/quickstart.md
@@ -35,15 +35,15 @@ functionalities based on ES Module.
```
@@ -66,7 +66,7 @@ Import via HTML `head` tag.
```html
-
+
```
@@ -97,23 +97,23 @@ Full import:
```js
import { createApp } from 'vue'
-import ElementPlus from 'element-plus';
-import App from './App.vue';
+import ElementPlus from 'element-plus'
+import App from './App.vue'
const app = createApp(App)
-app.use(ElementPlus, { size: 'small', zIndex: 3000 });
+app.use(ElementPlus, { size: 'small', zIndex: 3000 })
```
On demand:
```js
import { createApp } from 'vue'
-import { ElButton } from 'element-plus';
-import App from './App.vue';
+import { ElButton } from 'element-plus'
+import App from './App.vue'
const app = createApp(App)
app.config.globalProperties.$ELEMENT = option
-app.use(ElButton);
+app.use(ElButton)
```
## Using Nuxt.js
@@ -155,16 +155,18 @@ import vue from '@vitejs/plugin-vue'
import VitePluginElementPlus from 'vite-plugin-element-plus'
// https://vitejs.dev/config/
-export default defineConfig({
- plugins: [
- vue(),
- VitePluginElementPlus({
- // if you need to use the *.scss source file, you need to uncomment this comment
- // useSource: true
- }),
- ],
+export default defineConfig(({ mode }) => {
+ return {
+ plugins: [
+ vue(),
+ VitePluginElementPlus({
+ // if you need to use the *.scss source file, you need to uncomment this comment
+ // useSource: true
+ format: mode === 'development' ? 'esm' : 'cjs',
+ }),
+ ],
+ }
})
-
```
For all public API, you can refer to [vite-plugin-element-plus](https://github.com/element-plus/vite-plugin-element-plus)
@@ -189,16 +191,16 @@ Then you need to add the code below into your `babel.config.js` file.
module.exports = {
plugins: [
[
- "import",
+ 'import',
{
libraryName: 'element-plus',
// import component
- customName: (name) => {
+ customName: name => {
name = name.slice(3)
return `element-plus/lib/components/${name}`
},
// import style
- customStyleName: (name) => {
+ customStyleName: name => {
name = name.slice(3)
// if you need [name].scss source file, you need to uncomment this line
// return `element-plus/lib/components/${name}/style`
@@ -207,6 +209,6 @@ module.exports = {
},
},
],
- ]
+ ],
}
```
diff --git a/website/docs/fr-FR/quickstart.md b/website/docs/fr-FR/quickstart.md
index a6eb1516f9..bf18a9d833 100644
--- a/website/docs/fr-FR/quickstart.md
+++ b/website/docs/fr-FR/quickstart.md
@@ -22,8 +22,8 @@ app.mount('#app')
### Introduction de composants à la demande
- Le code JS d'ElementPlus supporte par défaut le [tree shaking](https://webpack.js.org/guides/tree-shaking/)
- basé sur les modules ES.
+Le code JS d'ElementPlus supporte par défaut le [tree shaking](https://webpack.js.org/guides/tree-shaking/)
+basé sur les modules ES.
> App.vue
@@ -34,15 +34,15 @@ app.mount('#app')
```
@@ -65,7 +65,7 @@ Introduit par les en-têtes HTML
```html
-
+
```
@@ -77,7 +77,6 @@ Voir [FAQ](/#/fr-FR/component/quickstart#faqs)
### Utilisez vue-cli@4.5
-
Nous avons préparé les plugins vue-cli correspondants pour la nouvelle version de
[Element Plus plugins](https://github.com/element-plus/vue-cli-plugin-element-plus)
que vous pouvez utiliser pour créer rapidement un projet basé sur les éléments suivants
@@ -85,7 +84,7 @@ Projet Element Plus.
### Utilisation du kit de démarrage
-Nous fournissons des [modèles de projet génériques ](https://github.com/element-plus/element-plus-starter)
+Nous fournissons des [modèles de projet génériques ](https://github.com/element-plus/element-plus-starter)
que vous pouvez utiliser directement, et nous fournissons également les éléments
suivants vite [modèle](https://github.com/element-plus/element-plus-vite-starter).
Pour
@@ -105,23 +104,23 @@ Présentation complète d'ElementPlus.
```js
import { createApp } from 'vue'
-import ElementPlus from 'element-plus';
-import App from './App.vue';
+import ElementPlus from 'element-plus'
+import App from './App.vue'
const app = createApp(App)
-app.use(ElementPlus, { size: 'small', zIndex: 3000 });
+app.use(ElementPlus, { size: 'small', zIndex: 3000 })
```
Présentation d'ElementPlus à la demande.
```js
import { createApp } from 'vue'
-import { ElButton } from 'element-plus';
-import App from './App.vue';
+import { ElButton } from 'element-plus'
+import App from './App.vue'
const app = createApp(App)
app.config.globalProperties.$ELEMENT = option
-app.use(ElButton);
+app.use(ElButton)
```
Avec les paramètres ci-dessus, tous les composants du projet ayant la propriété
@@ -165,7 +164,7 @@ import vue from '@vitejs/plugin-vue'
import VitePluginElementPlus from 'vite-plugin-element-plus'
// https://vitejs.dev/config/
-export default defineConfig({
+export default defineConfig(({ mode }) => {
plugins: [
vue(),
VitePluginElementPlus({
@@ -175,10 +174,10 @@ export default defineConfig({
// https://github.com/element-plus/vite-plugin-element-plus.
// pour les commentaires de la documentation
// useSource: true
+ format: mode === 'development' ? 'esm' : 'cjs',
}),
],
})
-
```
#### Chargement des styles à la demande avec webpack
diff --git a/website/docs/jp/quickstart.md b/website/docs/jp/quickstart.md
index 18b25593c0..8ec3c463a1 100644
--- a/website/docs/jp/quickstart.md
+++ b/website/docs/jp/quickstart.md
@@ -1,6 +1,6 @@
# すぐに始められる
-ここでは、プロジェクトでElementPlusを使用する方法について説明します。
+ここでは、プロジェクトで ElementPlus を使用する方法について説明します。
## コンポーネントの使用
@@ -22,7 +22,7 @@ app.mount('#app')
### オンデマンドでコンポーネントを導入
-`ElementPlus`的なJS代弁者认为支持基于ESモジュール的[树揺](https://webpack.js.org/guides/tree-shaking/)。
+`ElementPlus`的な JS 代弁者认为支持基于 ES モジュール的[树揺](https://webpack.js.org/guides/tree-shaking/)。
> App.vue
@@ -33,15 +33,15 @@ app.mount('#app')
```
@@ -52,18 +52,18 @@ export default defineComponent({
[CDN](https://www.cloudflare.com/learning/cdn/what-is-)を使用することもできます。 a-cdn/)
を使ってスタイルファイルを読み込むことで、アプリケーションの読み込みが速くなります。
-JSの方法で紹介されました
+JS の方法で紹介されました
```typescript
import 'element-plus/dist/index.css'
```
-HTMLヘッダで紹介
+HTML ヘッダで紹介
```html
-
+
```
@@ -73,50 +73,50 @@ HTMLヘッダで紹介
### vue-cli@4.5 をご利用ください。
-の新バージョンに対応したvue-cliプラグインを用意しました。
+の新バージョンに対応した vue-cli プラグインを用意しました。
をベースにしたプロジェクトを素早く構築するために使用できる[Element Plus plugins](https://github.com/element-plus/vue-cli-plugin-element-plus)を提供します。
-Element Plusプロジェクト。
+Element Plus プロジェクト。
### スターターキットの使い方
そのまま使える汎用的な[プロジェクトテンプレート](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)も用意していますので、そのままダウンロードしてお使いいただけます。
+Laravel をお使いの方は、対応する[テンプレート](https://github.com/element-plus/element-plus-in-laravel-starter)も用意していますので、そのままダウンロードしてお使いいただけます。
## グローバルコンフィギュレーション
-Element Plusを導入する際に、グローバルコンフィギュレーションオブジェクトを渡すことができます。 このオブジェクトは現在、`size` と `zIndex`
+Element Plus を導入する際に、グローバルコンフィギュレーションオブジェクトを渡すことができます。 このオブジェクトは現在、`size` と `zIndex`
フィールドをサポートしています。 サイズ
-は、コンポーネントのデフォルトサイズを変更するために使用され、`zIndex`は、ポップアップボックスの初期z-indexを設定します（デフォルト値：2000）。
+は、コンポーネントのデフォルトサイズを変更するために使用され、`zIndex`は、ポップアップボックスの初期 z-index を設定します（デフォルト値：2000）。
要求に応じて「エレメント・プラス」を以下のように導入します。
-ElementPlusを完全紹介。
+ElementPlus を完全紹介。
```js
import { createApp } from 'vue'
-import ElementPlus from 'element-plus';
-import App from './App.vue';
+import ElementPlus from 'element-plus'
+import App from './App.vue'
const app = createApp(App)
-app.use(ElementPlus, { size: 'small', zIndex: 3000 });
+app.use(ElementPlus, { size: 'small', zIndex: 3000 })
```
-ElementPlusのオンデマンド導入。
+ElementPlus のオンデマンド導入。
```js
import { createApp } from 'vue'
-import { ElButton } from 'element-plus';
-import App from './App.vue';
+import { ElButton } from 'element-plus'
+import App from './App.vue'
const app = createApp(App)
app.config.globalProperties.$ELEMENT = option
-app.use(ElButton);
+app.use(ElButton)
```
-上記の設定により、プロジェクト内で`size`プロパティを持つすべてのコンポーネントのデフォルトサイズは「small」となり、ポップアップボックスの初期z-indexは3000となります。
+上記の設定により、プロジェクト内で`size`プロパティを持つすべてのコンポーネントのデフォルトサイズは「small」となり、ポップアップボックスの初期 z-index は 3000 となります。
-## Nuxt.jsを使う
+## Nuxt.js を使う
また、[Nuxt.js](https://nuxtjs.org)を使って
@@ -126,13 +126,13 @@ app.use(ElButton);
## スタートアップ
-VueとElement Plusをベースにした開発環境が整ったところで、いよいよコードを書いてみましょう。 各コンポーネントの使用方法については、各コンポーネントのドキュメントを参照してください。
+Vue と Element Plus をベースにした開発環境が整ったところで、いよいよコードを書いてみましょう。 各コンポーネントの使用方法については、各コンポーネントのドキュメントを参照してください。
## よくあるご質問
### コンポーネントとスタイルを同時にオンデマンドで導入したいのですが、どのようにすればよいでしょうか？
-#### viteでオンデマンドのローディングスタイル
+#### vite でオンデマンドのローディングスタイル
ビルドパッケージングツールとして[vite](https://vitejs.dev)を使用している場合は、オンデマンドでスタイルを読み込むために、まず `vite-plugin-element-plus`
をインストールする必要があります。
@@ -151,22 +151,22 @@ import vue from '@vitejs/plugin-vue'
import VitePluginElementPlus from 'vite-plugin-element-plus'
// https://vitejs.dev/config/
-export default defineConfig({
+export default defineConfig(({ mode }) => {
plugins: [
vue(),
VitePluginElementPlus({
// コンポーネント名].scssのソースファイルを使用する必要がある場合は、以下のようにコメントアウトを解除する必要があります。
// useSource: true
// すべてのAPIについては、https://github.com/element-plus/vite-plugin-element-plus のドキュメントノートを参照してください。
+ format: mode === 'development' ? 'esm' : 'cjs',
}),
],
})
-
```
-#### webpackによるオンデマンドでのスタイルの読み込み
+#### webpack によるオンデマンドでのスタイルの読み込み
-ビルドパッケージングツールとしてwebpackを使用している場合は、必要に応じてスタイルを読み込むために、まず`babel-plugin-import`をインストールする必要があります。
+ビルドパッケージングツールとして webpack を使用している場合は、必要に応じてスタイルを読み込むために、まず`babel-plugin-import`をインストールする必要があります。
```shell
yarn add babel-plugin-import -D
@@ -183,10 +183,10 @@ module.exports = {
plugins: [
// ...others
[
- "import",
+ 'import',
{
libraryName: 'element-plus',
- customStyleName: (name) => {
+ customStyleName: name => {
name = name.slice(3)
// [name].cssファイルが必要な場合は、次の行を返す必要があります。
return `element-plus/es/${name}/style/css`
@@ -196,21 +196,21 @@ module.exports = {
},
],
],
-};
+}
module.exports = {
plugins: [
[
- "import",
+ 'import',
{
libraryName: 'element-plus',
// import component
- customName: (name) => {
+ customName: name => {
name = name.slice(3)
return `element-plus/lib/components/${name}`
},
// import style
- customStyleName: (name) => {
+ customStyleName: name => {
name = name.slice(3)
// [name].scssファイルが必要な場合は、前の行のコードをコメントアウトし、次の行のコードをアンコメントする必要があります。
// return `element-plus/lib/components/${name}/style`
@@ -219,6 +219,6 @@ module.exports = {
},
},
],
- ]
+ ],
}
```
diff --git a/website/docs/zh-CN/quickstart.md b/website/docs/zh-CN/quickstart.md
index c5c1f1a3c9..774e468435 100644
--- a/website/docs/zh-CN/quickstart.md
+++ b/website/docs/zh-CN/quickstart.md
@@ -33,15 +33,15 @@ app.mount('#app')
```
@@ -61,7 +61,7 @@ import 'element-plus/dist/index.css'
```html
-
+
```
@@ -90,23 +90,23 @@ Laravel 用户，我们也准备了相应的[模板](https://github.com/element-
```js
import { createApp } from 'vue'
-import ElementPlus from 'element-plus';
-import App from './App.vue';
+import ElementPlus from 'element-plus'
+import App from './App.vue'
const app = createApp(App)
-app.use(ElementPlus, { size: 'small', zIndex: 3000 });
+app.use(ElementPlus, { size: 'small', zIndex: 3000 })
```
按需引入 ElementPlus：
```js
import { createApp } from 'vue'
-import { ElButton } from 'element-plus';
-import App from './App.vue';
+import { ElButton } from 'element-plus'
+import App from './App.vue'
const app = createApp(App)
app.config.globalProperties.$ELEMENT = option
-app.use(ElButton);
+app.use(ElButton)
```
按照以上设置，项目中所有拥有 `size` 属性的组件的默认尺寸均为 'small'，弹框的初始 z-index 为 3000。
@@ -145,7 +145,7 @@ import vue from '@vitejs/plugin-vue'
import VitePluginElementPlus from 'vite-plugin-element-plus'
// https://vitejs.dev/config/
-export default defineConfig({
+export default defineConfig(({ mode }) => {
plugins: [
vue(),
VitePluginElementPlus({
@@ -153,10 +153,10 @@ export default defineConfig({
// 对于所有的 API 你可以参考 https://github.com/element-plus/vite-plugin-element-plus
// 的文档注释
// useSource: true
+ format: mode === 'development' ? 'esm' : 'cjs',
}),
],
})
-
```
#### 使用 webpack 按需加载样式
@@ -177,16 +177,16 @@ npm install babel-plugin-import -D
module.exports = {
plugins: [
[
- "import",
+ 'import',
{
libraryName: 'element-plus',
// 引入组件
- customName: (name) => {
+ customName: name => {
name = name.slice(3)
return `element-plus/lib/components/${name}`
},
// 引入样式
- customStyleName: (name) => {
+ customStyleName: name => {
name = name.slice(3)
// 如果你需要引入 [name].scss 文件，你需要用下面这行
// return `element-plus/lib/components/${name}/style`
@@ -195,6 +195,6 @@ module.exports = {
},
},
],
- ]
+ ],
}
```