test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-01 10:47:57 +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>
</template>
<script>
import { defineComponent } from 'vue'
import { ElButton } from 'element-plus'
import { defineComponent } from 'vue'
import { ElButton } from 'element-plus'
export default defineComponent({
name: 'app'
components: {
ElButton,
},
})
export default defineComponent({
name: 'app'
components: {
ElButton,
},
})
</script>
```
@ -66,7 +66,7 @@ Import via HTML `head` tag.
```html
<!-- index.html -->
<head>
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css">
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
</head>
```
@ -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 = {
},
},
],
]
],
}
```

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

@ -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')
</el-button>
</template>
<script>
import { defineComponent } from 'vue'
import { ElButton } from 'element-plus'
import { defineComponent } from 'vue'
import { ElButton } from 'element-plus'
export default defineComponent({
name: 'app'
components: {
ElButton,
},
})
export default defineComponent({
name: 'app'
components: {
ElButton,
},
})
</script>
```
@ -65,7 +65,7 @@ Introduit par les en-têtes HTML
```html
<!-- index.html -->
<head>
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css">
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
</head>
```
@ -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

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
@ -33,15 +33,15 @@ app.mount('#app')
</el-button>
</template>
<script>
import { defineComponent } from 'vue'
import { ElButton } from 'element-plus'
import { defineComponent } from 'vue'
import { ElButton } from 'element-plus'
export default defineComponent({
name: 'app'
components: {
ElButton,
},
})
export default defineComponent({
name: 'app'
components: {
ElButton,
},
})
</script>
```
@ -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
<!-- index.html -->
<head>
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css">
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
</head>
```
@ -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 = {
},
},
],
]
],
}
```

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

@ -33,15 +33,15 @@ app.mount('#app')
</el-button>
</template>
<script>
import { defineComponent } from 'vue'
import { ElButton } from 'element-plus'
import { defineComponent } from 'vue'
import { ElButton } from 'element-plus'
export default defineComponent({
name: 'app'
components: {
ElButton,
},
})
export default defineComponent({
name: 'app'
components: {
ElButton,
},
})
</script>
```
@ -61,7 +61,7 @@ import 'element-plus/dist/index.css'
```html
<!-- index.html -->
<head>
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css">
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
</head>
```
@ -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 = {
},
},
],
]
],
}
```