mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-01 10:47:57 +08:00
docs: add format for vite-plugin-element-plus (#3095)
This commit is contained in:
云游君
GitHub
parent
ae96630f6f
commit
69b402d05e
@ -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({
|
||||
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 = {
|
||||
},
|
||||
},
|
||||
],
|
||||
]
|
||||
],
|
||||
}
|
||||
```
|
||||
|
||||
@ -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
|
||||
@ -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
|
||||
|
||||
@ -63,7 +63,7 @@ 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>
|
||||
```
|
||||
|
||||
@ -95,23 +95,23 @@ 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 のオンデマンド導入。
|
||||
|
||||
```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 となります。
|
||||
@ -151,17 +151,17 @@ 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 によるオンデマンドでのスタイルの読み込み
|
||||
@ -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 = {
|
||||
},
|
||||
},
|
||||
],
|
||||
]
|
||||
],
|
||||
}
|
||||
```
|
||||
|
||||
@ -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 = {
|
||||
},
|
||||
},
|
||||
],
|
||||
]
|
||||
],
|
||||
}
|
||||
```
|
||||
|
||||
Loading…
Reference in New Issue
Block a user