test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-03 03:38:41 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

docs: add format for vite-plugin-element-plus (#3095)

Browse Source
This commit is contained in:
云游君 2021-08-27 14:38:05 +08:00 committed by GitHub
parent ae96630f6f
commit 69b402d05e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 112 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
website/docs/en-US/quickstart.md
View File

@ -35,15 +35,15 @@ functionalities based on ES Module.
</el-button> </el-button>
</template> </template>
<script> <script>
import { defineComponent } from 'vue' import { defineComponent } from 'vue'
import { ElButton } from 'element-plus' import { ElButton } from 'element-plus'
export default defineComponent({ export default defineComponent({
name: 'app' name: 'app'
components: { components: {
ElButton, ElButton,
}, },
}) })
</script> </script>
``` ```
@ -66,7 +66,7 @@ Import via HTML `head` tag.
```html ```html
<!-- index.html --> <!-- index.html -->
<head> <head>
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css"> <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
</head> </head>
``` ```
@ -97,23 +97,23 @@ Full import:
```js ```js
import { createApp } from 'vue' import { createApp } from 'vue'
import ElementPlus from 'element-plus'; import ElementPlus from 'element-plus'
import App from './App.vue'; import App from './App.vue'
const app = createApp(App) const app = createApp(App)
app.use(ElementPlus, { size: 'small', zIndex: 3000 }); app.use(ElementPlus, { size: 'small', zIndex: 3000 })
``` ```
On demand: On demand:
```js ```js
import { createApp } from 'vue' import { createApp } from 'vue'
import { ElButton } from 'element-plus'; import { ElButton } from 'element-plus'
import App from './App.vue'; import App from './App.vue'
const app = createApp(App) const app = createApp(App)
app.config.globalProperties.$ELEMENT = option app.config.globalProperties.$ELEMENT = option
app.use(ElButton); app.use(ElButton)
``` ```
## Using Nuxt.js ## Using Nuxt.js
@ -155,16 +155,18 @@ import vue from '@vitejs/plugin-vue'
import VitePluginElementPlus from 'vite-plugin-element-plus' import VitePluginElementPlus from 'vite-plugin-element-plus'
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig(({ mode }) => {
plugins: [ return {
vue(), plugins: [
VitePluginElementPlus({ vue(),
// if you need to use the *.scss source file, you need to uncomment this comment VitePluginElementPlus({
// useSource: true // 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) 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 = { module.exports = {
plugins: [ plugins: [
[ [
"import", 'import',
{ {
libraryName: 'element-plus', libraryName: 'element-plus',
// import component // import component
customName: (name) => { customName: name => {
name = name.slice(3) name = name.slice(3)
return `element-plus/lib/components/${name}` return `element-plus/lib/components/${name}`
}, },
// import style // import style
customStyleName: (name) => { customStyleName: name => {
name = name.slice(3) name = name.slice(3)
// if you need [name].scss source file, you need to uncomment this line // if you need [name].scss source file, you need to uncomment this line
// return `element-plus/lib/components/${name}/style` // return `element-plus/lib/components/${name}/style`
@ -207,6 +209,6 @@ module.exports = {
}, },
}, },
], ],
] ],
} }
``` ```

41
website/docs/fr-FR/quickstart.md
View File

@ -22,8 +22,8 @@ app.mount('#app')
### Introduction de composants à la demande ### Introduction de composants à la demande
Le code JS d'ElementPlus supporte par défaut le [tree shaking](https://webpack.js.org/guides/tree-shaking/) Le code JS d'ElementPlus supporte par défaut le [tree shaking](https://webpack.js.org/guides/tree-shaking/)
basé sur les modules ES. basé sur les modules ES.
> App.vue > App.vue
@ -34,15 +34,15 @@ app.mount('#app')
</el-button> </el-button>
</template> </template>
<script> <script>
import { defineComponent } from 'vue' import { defineComponent } from 'vue'
import { ElButton } from 'element-plus' import { ElButton } from 'element-plus'
export default defineComponent({ export default defineComponent({
name: 'app' name: 'app'
components: { components: {
ElButton, ElButton,
}, },
}) })
</script> </script>
``` ```
@ -65,7 +65,7 @@ Introduit par les en-têtes HTML
```html ```html
<!-- index.html --> <!-- index.html -->
<head> <head>
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css"> <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
</head> </head>
``` ```
@ -77,7 +77,6 @@ Voir [FAQ](/#/fr-FR/component/quickstart#faqs)
### Utilisez vue-cli@4.5 ### Utilisez vue-cli@4.5
Nous avons préparé les plugins vue-cli correspondants pour la nouvelle version de 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) [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 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 ### 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 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). suivants vite [modèle](https://github.com/element-plus/element-plus-vite-starter).
Pour Pour
@ -105,23 +104,23 @@ Présentation complète d'ElementPlus.
```js ```js
import { createApp } from 'vue' import { createApp } from 'vue'
import ElementPlus from 'element-plus'; import ElementPlus from 'element-plus'
import App from './App.vue'; import App from './App.vue'
const app = createApp(App) const app = createApp(App)
app.use(ElementPlus, { size: 'small', zIndex: 3000 }); app.use(ElementPlus, { size: 'small', zIndex: 3000 })
``` ```
Présentation d'ElementPlus à la demande. Présentation d'ElementPlus à la demande.
```js ```js
import { createApp } from 'vue' import { createApp } from 'vue'
import { ElButton } from 'element-plus'; import { ElButton } from 'element-plus'
import App from './App.vue'; import App from './App.vue'
const app = createApp(App) const app = createApp(App)
app.config.globalProperties.$ELEMENT = option 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é 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' import VitePluginElementPlus from 'vite-plugin-element-plus'
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig(({ mode }) => {
plugins: [ plugins: [
vue(), vue(),
VitePluginElementPlus({ VitePluginElementPlus({
@ -175,10 +174,10 @@ export default defineConfig({
// https://github.com/element-plus/vite-plugin-element-plus. // https://github.com/element-plus/vite-plugin-element-plus.
// pour les commentaires de la documentation // pour les commentaires de la documentation
// useSource: true // useSource: true
format: mode === 'development' ? 'esm' : 'cjs',
}), }),
], ],
}) })
``` ```
#### Chargement des styles à la demande avec webpack #### Chargement des styles à la demande avec webpack

82
website/docs/jp/quickstart.md
View File

@ -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 > App.vue
@ -33,15 +33,15 @@ app.mount('#app')
</el-button> </el-button>
</template> </template>
<script> <script>
import { defineComponent } from 'vue' import { defineComponent } from 'vue'
import { ElButton } from 'element-plus' import { ElButton } from 'element-plus'
export default defineComponent({ export default defineComponent({
name: 'app' name: 'app'
components: { components: {
ElButton, ElButton,
}, },
}) })
</script> </script>
``` ```
@ -52,18 +52,18 @@ export default defineComponent({
[CDN](https://www.cloudflare.com/learning/cdn/what-is-)を使用することもできます。 a-cdn/) [CDN](https://www.cloudflare.com/learning/cdn/what-is-)を使用することもできます。 a-cdn/)
を使ってスタイルファイルを読み込むことで、アプリケーションの読み込みが速くなります。 を使ってスタイルファイルを読み込むことで、アプリケーションの読み込みが速くなります。
JSの方法で紹介されました JS の方法で紹介されました
```typescript ```typescript
import 'element-plus/dist/index.css' import 'element-plus/dist/index.css'
``` ```
HTMLヘッダで紹介 HTML ヘッダで紹介
```html ```html
<!-- index.html --> <!-- index.html -->
<head> <head>
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css"> <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
</head> </head>
``` ```
@ -73,50 +73,50 @@ HTMLヘッダで紹介
### vue-cli@4.5 をご利用ください。 ### vue-cli@4.5 をご利用ください。
の新バージョンに対応したvue-cliプラグインを用意しました。 の新バージョンに対応した vue-cli プラグインを用意しました。
をベースにしたプロジェクトを素早く構築するために使用できる[Element Plus plugins](https://github.com/element-plus/vue-cli-plugin-element-plus)を提供します。 をベースにしたプロジェクトを素早く構築するために使用できる[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)を提供し、さらには そのまま使える汎用的な[プロジェクトテンプレート](https://github.com/element-plus/element-plus-starter)を提供し、さらには
Vite[テンプレート](https://github.com/element-plus/element-plus-vite-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 ```js
import { createApp } from 'vue' import { createApp } from 'vue'
import ElementPlus from 'element-plus'; import ElementPlus from 'element-plus'
import App from './App.vue'; import App from './App.vue'
const app = createApp(App) const app = createApp(App)
app.use(ElementPlus, { size: 'small', zIndex: 3000 }); app.use(ElementPlus, { size: 'small', zIndex: 3000 })
``` ```
ElementPlusのオンデマンド導入。 ElementPlus のオンデマンド導入。
```js ```js
import { createApp } from 'vue' import { createApp } from 'vue'
import { ElButton } from 'element-plus'; import { ElButton } from 'element-plus'
import App from './App.vue'; import App from './App.vue'
const app = createApp(App) const app = createApp(App)
app.config.globalProperties.$ELEMENT = option 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)を使って また、[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` ビルドパッケージングツールとして[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' import VitePluginElementPlus from 'vite-plugin-element-plus'
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig(({ mode }) => {
plugins: [ plugins: [
vue(), vue(),
VitePluginElementPlus({ VitePluginElementPlus({
// コンポーネント名].scssのソースファイルを使用する必要がある場合は、以下のようにコメントアウトを解除する必要があります。 // コンポーネント名].scssのソースファイルを使用する必要がある場合は、以下のようにコメントアウトを解除する必要があります。
// useSource: true // useSource: true
// すべてのAPIについては、https://github.com/element-plus/vite-plugin-element-plus のドキュメントノートを参照してください。 // すべての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 ```shell
yarn add babel-plugin-import -D yarn add babel-plugin-import -D
@ -183,10 +183,10 @@ module.exports = {
plugins: [ plugins: [
// ...others // ...others
[ [
"import", 'import',
{ {
libraryName: 'element-plus', libraryName: 'element-plus',
customStyleName: (name) => { customStyleName: name => {
name = name.slice(3) name = name.slice(3)
// [name].cssファイルが必要な場合は、次の行を返す必要があります。 // [name].cssファイルが必要な場合は、次の行を返す必要があります。
return `element-plus/es/${name}/style/css` return `element-plus/es/${name}/style/css`
@ -196,21 +196,21 @@ module.exports = {
}, },
], ],
], ],
}; }
module.exports = { module.exports = {
plugins: [ plugins: [
[ [
"import", 'import',
{ {
libraryName: 'element-plus', libraryName: 'element-plus',
// import component // import component
customName: (name) => { customName: name => {
name = name.slice(3) name = name.slice(3)
return `element-plus/lib/components/${name}` return `element-plus/lib/components/${name}`
}, },
// import style // import style
customStyleName: (name) => { customStyleName: name => {
name = name.slice(3) name = name.slice(3)
// [name].scssファイルが必要な場合は、前の行のコードをコメントアウトし、次の行のコードをアンコメントする必要があります。 // [name].scssファイルが必要な場合は、前の行のコードをコメントアウトし、次の行のコードをアンコメントする必要があります。
// return `element-plus/lib/components/${name}/style` // return `element-plus/lib/components/${name}/style`
@ -219,6 +219,6 @@ module.exports = {
}, },
}, },
], ],
] ],
} }
``` ```

42
website/docs/zh-CN/quickstart.md
View File

@ -33,15 +33,15 @@ app.mount('#app')
</el-button> </el-button>
</template> </template>
<script> <script>
import { defineComponent } from 'vue' import { defineComponent } from 'vue'
import { ElButton } from 'element-plus' import { ElButton } from 'element-plus'
export default defineComponent({ export default defineComponent({
name: 'app' name: 'app'
components: { components: {
ElButton, ElButton,
}, },
}) })
</script> </script>
``` ```
@ -61,7 +61,7 @@ import 'element-plus/dist/index.css'
```html ```html
<!-- index.html --> <!-- index.html -->
<head> <head>
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css"> <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
</head> </head>
``` ```
@ -90,23 +90,23 @@ Laravel 用户，我们也准备了相应的[模板](https://github.com/element-
```js ```js
import { createApp } from 'vue' import { createApp } from 'vue'
import ElementPlus from 'element-plus'; import ElementPlus from 'element-plus'
import App from './App.vue'; import App from './App.vue'
const app = createApp(App) const app = createApp(App)
app.use(ElementPlus, { size: 'small', zIndex: 3000 }); app.use(ElementPlus, { size: 'small', zIndex: 3000 })
``` ```
按需引入 ElementPlus： 按需引入 ElementPlus：
```js ```js
import { createApp } from 'vue' import { createApp } from 'vue'
import { ElButton } from 'element-plus'; import { ElButton } from 'element-plus'
import App from './App.vue'; import App from './App.vue'
const app = createApp(App) const app = createApp(App)
app.config.globalProperties.$ELEMENT = option app.config.globalProperties.$ELEMENT = option
app.use(ElButton); app.use(ElButton)
``` ```
按照以上设置，项目中所有拥有 `size` 属性的组件的默认尺寸均为 'small'，弹框的初始 z-index 为 3000。 按照以上设置，项目中所有拥有 `size` 属性的组件的默认尺寸均为 'small'，弹框的初始 z-index 为 3000。
@ -145,7 +145,7 @@ import vue from '@vitejs/plugin-vue'
import VitePluginElementPlus from 'vite-plugin-element-plus' import VitePluginElementPlus from 'vite-plugin-element-plus'
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig(({ mode }) => {
plugins: [ plugins: [
vue(), vue(),
VitePluginElementPlus({ VitePluginElementPlus({
@ -153,10 +153,10 @@ export default defineConfig({
// 对于所有的 API 你可以参考 https://github.com/element-plus/vite-plugin-element-plus // 对于所有的 API 你可以参考 https://github.com/element-plus/vite-plugin-element-plus
// 的文档注释 // 的文档注释
// useSource: true // useSource: true
format: mode === 'development' ? 'esm' : 'cjs',
}), }),
], ],
}) })
``` ```
#### 使用 webpack 按需加载样式 #### 使用 webpack 按需加载样式
@ -177,16 +177,16 @@ npm install babel-plugin-import -D
module.exports = { module.exports = {
plugins: [ plugins: [
[ [
"import", 'import',
{ {
libraryName: 'element-plus', libraryName: 'element-plus',
// 引入组件 // 引入组件
customName: (name) => { customName: name => {
name = name.slice(3) name = name.slice(3)
return `element-plus/lib/components/${name}` return `element-plus/lib/components/${name}`
}, },
// 引入样式 // 引入样式
customStyleName: (name) => { customStyleName: name => {
name = name.slice(3) name = name.slice(3)
// 如果你需要引入 [name].scss 文件，你需要用下面这行 // 如果你需要引入 [name].scss 文件，你需要用下面这行
// return `element-plus/lib/components/${name}/style` // return `element-plus/lib/components/${name}/style`
@ -195,6 +195,6 @@ module.exports = {
}, },
}, },
], ],
] ],
} }
``` ```