From 69b402d05e3fed7b63d344bdda6dd4a77560d811 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=91=E6=B8=B8=E5=90=9B?= Date: Fri, 27 Aug 2021 14:38:05 +0800 Subject: [PATCH] docs: add format for vite-plugin-element-plus (#3095) --- website/docs/en-US/quickstart.md | 58 +++++++++++----------- website/docs/fr-FR/quickstart.md | 41 ++++++++-------- website/docs/jp/quickstart.md | 82 ++++++++++++++++---------------- website/docs/zh-CN/quickstart.md | 42 ++++++++-------- 4 files changed, 112 insertions(+), 111 deletions(-) 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 = { }, }, ], - ] + ], } ```