From 8b7db50681e721e0776cc1ccded53bdb1bda8abb Mon Sep 17 00:00:00 2001 From: Ryan2128 <33176053+Ryan2128@users.noreply.github.com> Date: Sat, 27 Mar 2021 19:18:36 +0800 Subject: [PATCH] docs: update on demand import docs (#1672) --- website/docs/en-US/quickstart.md | 109 +++++++++++++++++++++++++++++- website/docs/es/quickstart.md | 110 ++++++++++++++++++++++++++++++- website/docs/fr-FR/quickstart.md | 108 +++++++++++++++++++++++++++++- website/docs/jp/quickstart.md | 109 +++++++++++++++++++++++++++++- website/docs/zh-CN/quickstart.md | 109 +++++++++++++++++++++++++++++- 5 files changed, 535 insertions(+), 10 deletions(-) diff --git a/website/docs/en-US/quickstart.md b/website/docs/en-US/quickstart.md index 3d7425c817..6419e468e5 100644 --- a/website/docs/en-US/quickstart.md +++ b/website/docs/en-US/quickstart.md @@ -35,6 +35,8 @@ The above imports Element Plus entirely. Note that CSS file needs to be imported #### On demand +**Vue CLI** + With the help of [babel-plugin-import](https://github.com/ant-design/babel-plugin-import), we can import components we actually need, making the project smaller than otherwise. Firstly，install babel-plugin-import: @@ -52,6 +54,31 @@ $ yarn add babel-plugin-import -D Then edit babel.config.js: +- import `.scss` style + +:::warning +Please make sure that `sass` and `sass-loader` dependencies have been installed and import `element-plus/packages/theme-chalk/src/base.scss` in the entry file. +::: + +```js +module.exports = { + plugins: [ + [ + "import", + { + libraryName: 'element-plus', + customStyleName: (name) => { + name = name.slice(3) + return `element-plus/packages/theme-chalk/src/${name}.scss`; + }, + }, + ], + ], +}; +``` + +- import `.css` style + ```js module.exports = { plugins: [ @@ -60,8 +87,6 @@ module.exports = { { libraryName: 'element-plus', customStyleName: (name) => { - // Because of the existence of `customStyleName`, `style: true` will not be effective. - // So if you want to use the `.scss` source file, you only need to replace the extension name from `.css` to `.scss` return `element-plus/lib/theme-chalk/${name}.css`; }, }, @@ -70,12 +95,87 @@ module.exports = { }; ``` +**Vite** + +Firstly，install [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import): + +```bash +$ npm install vite-plugin-style-import -D +``` + +or if you use Yarn as package manager + +```bash +$ yarn add vite-plugin-style-import -D +``` + +Then edit vite.config.js: + +- import `.scss` style + +:::warning +Please make sure that the `sass` dependency have been installed and import `element-plus/packages/theme-chalk/src/base.scss` in the entry file. +::: + +```js +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' +import styleImport from 'vite-plugin-style-import' + +export default defineConfig({ + plugins: [ + vue(), + styleImport({ + libs: [{ + libraryName: 'element-plus', + resolveStyle: (name) => { + name = name.splice(3) + return `element-plus/packages/theme-chalk/src/${name}.scss`; + }, + resolveComponent: (name) => { + return `element-plus/lib/${name}`; + }, + }] + }) + ] +}) +``` + +- import `.css` style + +```js +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' +import styleImport from 'vite-plugin-style-import' + +export default defineConfig({ + plugins: [ + vue(), + styleImport({ + libs: [ + { + libraryName: 'element-plus', + resolveStyle: (name) => { + return `element-plus/lib/theme-chalk/${name}.css`; + }, + resolveComponent: (name) => { + return `element-plus/lib/${name}`; + }, + } + ] + }) + ] +}) +``` + Next, if you need Button and Select, edit main.js: ```javascript import { createApp } from 'vue' import { ElButton, ElSelect } from 'element-plus'; import App from './App.vue'; +// If you want to use the .scss style file, you need to import the base.scss file +// import 'element-plus/packages/theme-chalk/src/base.scss' const app = createApp(App) app.component(ElButton.name, ElButton); @@ -94,6 +194,9 @@ Full example (Component list [reference](https://github.com/element-plus/element ```javascript import { createApp } from 'vue' import App from './App.vue'; +// If you want to use the .scss style file, you need to import the base.scss file +// import 'element-plus/packages/theme-chalk/src/base.scss' + import { ElAlert, ElAside, @@ -301,6 +404,8 @@ Partial import Element： import { createApp } from 'vue' import { ElButton } from 'element-plus'; import App from './App.vue'; +// If you want to use the .scss style file, you need to import the base.scss file +// import 'element-plus/packages/theme-chalk/src/base.scss' const app = createApp(App) app.config.globalProperties.$ELEMENT = option diff --git a/website/docs/es/quickstart.md b/website/docs/es/quickstart.md index a7e955de05..99711dea3a 100644 --- a/website/docs/es/quickstart.md +++ b/website/docs/es/quickstart.md @@ -35,6 +35,8 @@ El código anterior importa Element Plus completamente. Nótese que el archivo C #### En demanda +**Vue CLI** + Con la ayuda de [babel-plugin-import](https://github.com/ant-design/babel-plugin-import), podemos importar los componentes que necesitamos, haciendo nuestro proyecto más pequeño que de la otra manera. Primero, instale babel-plugin-import: @@ -45,6 +47,31 @@ npm install babel-plugin-import -D Luego edite babel.config.js: +- import `.scss` style + +:::warning +Please make sure that `sass` and `sass-loader` dependencies have been installed and import `element-plus/packages/theme-chalk/src/base.scss` in the entry file. +::: + +```js +module.exports = { + plugins: [ + [ + "import", + { + libraryName: 'element-plus', + customStyleName: (name) => { + name = name.slice(3) + return `element-plus/packages/theme-chalk/src/${name}.scss`; + }, + }, + ], + ], +}; +``` + +- import `.css` style + ```js module.exports = { plugins: [ @@ -53,8 +80,6 @@ module.exports = { { libraryName: 'element-plus', customStyleName: (name) => { - // Debido a la existencia de `customStyleName`, `style: true` no será efectivo. - // Así que si quieres usar el archivo fuente `.scss`, sólo tienes que reemplazar el nombre de la extensión de `.css` a `.scss`. return `element-plus/lib/theme-chalk/${name}.css`; }, }, @@ -62,6 +87,80 @@ module.exports = { ], }; ``` + +**Vite** + +Firstly，install [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import): + +```bash +$ npm install vite-plugin-style-import -D +``` + +or if you use `Yarn` as package manager + +```bash +$ yarn add vite-plugin-style-import -D +``` + +Then edit vite.config.js: + +- import `.scss` style + + +:::warning +Please make sure that the `sass` dependency have been installed and import `element-plus/packages/theme-chalk/src/base.scss` in the entry file. +::: + +```js +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' +import styleImport from 'vite-plugin-style-import' + +export default defineConfig({ + plugins: [ + vue(), + styleImport({ + libs: [{ + libraryName: 'element-plus', + resolveStyle: (name) => { + name = name.splice(3) + return `element-plus/packages/theme-chalk/src/${name}.scss`; + }, + resolveComponent: (name) => { + return `element-plus/lib/${name}`; + }, + }] + }) + ] +}) +``` + +- import `.css` style + +```js +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' +import styleImport from 'vite-plugin-style-import' + +export default defineConfig({ + plugins: [ + vue(), + styleImport({ + libs: [ + { + libraryName: 'element-plus', + resolveStyle: (name) => { + return `element-plus/lib/theme-chalk/${name}.css`; + }, + resolveComponent: (name) => { + return `element-plus/lib/${name}`; + }, + } + ] + }) + ] +}) +``` Luego, si necesita Button y Select, edite main.js: @@ -69,6 +168,8 @@ Luego, si necesita Button y Select, edite main.js: import { createApp } from 'vue' import { ElButton, ElSelect } from 'element-plus'; import App from './App.vue'; +// If you want to use the .scss style file, you need to import the base.scss file +// import 'element-plus/packages/theme-chalk/src/base.scss' const app = createApp(App) app.component(ElButton.name, ElButton); @@ -87,6 +188,9 @@ Ejemplo completo (Referencia completa de componentes [reference](https://github. ```javascript import { createApp } from 'vue' import App from './App.vue'; +// If you want to use the .scss style file, you need to import the base.scss file +// import 'element-plus/packages/theme-chalk/src/base.scss' + import { ElAlert, ElAside, @@ -296,6 +400,8 @@ Importando Element Plus parcialmente： import { createApp } from 'vue' import { ElButton } from 'element-plus'; import App from './App.vue'; +// If you want to use the .scss style file, you need to import the base.scss file +// import 'element-plus/packages/theme-chalk/src/base.scss' const app = createApp(App) app.config.globalProperties.$ELEMENT = option diff --git a/website/docs/fr-FR/quickstart.md b/website/docs/fr-FR/quickstart.md index 169f0969a0..072fc0cc44 100644 --- a/website/docs/fr-FR/quickstart.md +++ b/website/docs/fr-FR/quickstart.md @@ -35,6 +35,7 @@ L'exemple ci-dessus importe Element Plus entièrement. Notez que les fichiers CS #### À la demande +**Vue CLI** Grâce au [babel-plugin-import](https://github.com/ant-design/babel-plugin-import), nous pouvons importer uniquement les composants désirés, rendant ainsi le projet plus léger. Tout d'abord, installez babel-plugin-import: @@ -45,6 +46,31 @@ npm install babel-plugin-import -D Puis éditez babel.config.js: +- import `.scss` style + +:::warning +Please make sure that `sass` and `sass-loader` dependencies have been installed and import `element-plus/packages/theme-chalk/src/base.scss` in the entry file. +::: + +```js +module.exports = { + plugins: [ + [ + "import", + { + libraryName: 'element-plus', + customStyleName: (name) => { + name = name.slice(3) + return `element-plus/packages/theme-chalk/src/${name}.scss`; + }, + }, + ], + ], +}; +``` + +- import `.css` style + ```js module.exports = { plugins: [ @@ -53,8 +79,6 @@ module.exports = { { libraryName: 'element-plus', customStyleName: (name) => { - // En raison de l'existence de "customStyleName", "style : true" ne sera pas efficace. - // Donc si vous voulez utiliser le fichier source `.scss`, il vous suffit de remplacer le nom de l'extension `.css` par `.scss`. return `element-plus/lib/theme-chalk/${name}.css`; }, }, @@ -62,6 +86,79 @@ module.exports = { ], }; ``` + +**Vite** + +Firstly，install [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import): + +```bash +$ npm install vite-plugin-style-import -D +``` + +or if you use `Yarn` as package manager + +```bash +$ yarn add vite-plugin-style-import -D +``` + +Then edit vite.config.js: + +- import `.scss` style + +:::warning +Please make sure that the `sass` dependency have been installed and import `element-plus/packages/theme-chalk/src/base.scss` in the entry file. +::: + +```js +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' +import styleImport from 'vite-plugin-style-import' + +export default defineConfig({ + plugins: [ + vue(), + styleImport({ + libs: [{ + libraryName: 'element-plus', + resolveStyle: (name) => { + name = name.splice(3) + return `element-plus/packages/theme-chalk/src/${name}.scss`; + }, + resolveComponent: (name) => { + return `element-plus/lib/${name}`; + }, + }] + }) + ] +}) +``` + +- import `.css` style + +```js +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' +import styleImport from 'vite-plugin-style-import' + +export default defineConfig({ + plugins: [ + vue(), + styleImport({ + libs: [ + { + libraryName: 'element-plus', + resolveStyle: (name) => { + return `element-plus/lib/theme-chalk/${name}.css`; + }, + resolveComponent: (name) => { + return `element-plus/lib/${name}`; + }, + } + ] + }) + ] +}) +``` Ensuite, si vous n'avez besoin que de Button et Select, éditez main.js comme suit: @@ -69,6 +166,8 @@ Ensuite, si vous n'avez besoin que de Button et Select, éditez main.js comme su import { createApp } from 'vue' import { ElButton, ElSelect } from 'element-plus'; import App from './App.vue'; +// If you want to use the .scss style file, you need to import the base.scss file +// import 'element-plus/packages/theme-chalk/src/base.scss' const app = createApp(App) app.component(ElButton.name, ElButton); @@ -87,6 +186,9 @@ Exemple complet (liste complète des composants dans [reference](https://github. ```javascript import { createApp } from 'vue' import App from './App.vue'; +// If you want to use the .scss style file, you need to import the base.scss file +// import 'element-plus/packages/theme-chalk/src/base.scss' + import { ElAlert, ElAside, @@ -294,6 +396,8 @@ Import partiel d'Element： import { createApp } from 'vue' import { ElButton } from 'element-plus'; import App from './App.vue'; +// If you want to use the .scss style file, you need to import the base.scss file +// import 'element-plus/packages/theme-chalk/src/base.scss' const app = createApp(App) app.config.globalProperties.$ELEMENT = option diff --git a/website/docs/jp/quickstart.md b/website/docs/jp/quickstart.md index 141a486880..bbe86ba606 100644 --- a/website/docs/jp/quickstart.md +++ b/website/docs/jp/quickstart.md @@ -35,6 +35,8 @@ app.mount('#app') #### オンデマンド +**Vue CLI** + [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) を用いて、 必要な分のコンポーネントをインポートし、プロジェクトをより小さくすることが出来ます。 はじめに、babel-plugin-importをインストール: @@ -45,6 +47,31 @@ npm install babel-plugin-import -D つぎに babel.config.js を編集します: +- import `.scss` style + +:::warning +Please make sure that `sass` and `sass-loader` dependencies have been installed and import `element-plus/packages/theme-chalk/src/base.scss` in the entry file. +::: + +```js +module.exports = { + plugins: [ + [ + "import", + { + libraryName: 'element-plus', + customStyleName: (name) => { + name = name.slice(3) + return `element-plus/packages/theme-chalk/src/${name}.scss`; + }, + }, + ], + ], +}; +``` + +- import `.css` style + ```js module.exports = { plugins: [ @@ -53,8 +80,6 @@ module.exports = { { libraryName: 'element-plus', customStyleName: (name) => { - // `customStyleName` が存在するため、`style: true` は有効になりません。 - // そのため、`.scss` のソースファイルを使いたい場合は、拡張子を `.css` から `.scss` に置き換えるだけです。 return `element-plus/lib/theme-chalk/${name}.css`; }, }, @@ -63,12 +88,87 @@ module.exports = { }; ``` +**Vite** + +Firstly，install [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import): + +```bash +$ npm install vite-plugin-style-import -D +``` + +or if you use `Yarn` as package manager + +```bash +$ yarn add vite-plugin-style-import -D +``` + +Then edit vite.config.js: + +- import `.scss` style + +:::warning +Please make sure that the `sass` dependency have been installed and import `element-plus/packages/theme-chalk/src/base.scss` in the entry file. +::: + +```js +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' +import styleImport from 'vite-plugin-style-import' + +export default defineConfig({ + plugins: [ + vue(), + styleImport({ + libs: [{ + libraryName: 'element-plus', + resolveStyle: (name) => { + name = name.splice(3) + return `element-plus/packages/theme-chalk/src/${name}.scss`; + }, + resolveComponent: (name) => { + return `element-plus/lib/${name}`; + }, + }] + }) + ] +}) +``` + +- import `.css` style + +```js +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' +import styleImport from 'vite-plugin-style-import' + +export default defineConfig({ + plugins: [ + vue(), + styleImport({ + libs: [ + { + libraryName: 'element-plus', + resolveStyle: (name) => { + return `element-plus/lib/theme-chalk/${name}.css`; + }, + resolveComponent: (name) => { + return `element-plus/lib/${name}`; + }, + } + ] + }) + ] +}) +``` + 次に、ボタンとセレクトが必要な場合、main.jsを編集します: ```javascript import { createApp } from 'vue' import { ElButton, ElSelect } from 'element-plus'; import App from './App.vue'; +// If you want to use the .scss style file, you need to import the base.scss file +// import 'element-plus/packages/theme-chalk/src/base.scss' const app = createApp(App) app.component(ElButton.name, ElButton); @@ -87,6 +187,9 @@ app.mount('#app') ```javascript import { createApp } from 'vue' import App from './App.vue'; +// If you want to use the .scss style file, you need to import the base.scss file +// import 'element-plus/packages/theme-chalk/src/base.scss' + import { ElAlert, ElAside, @@ -294,6 +397,8 @@ Element Plusを部分的にインポート： import { createApp } from 'vue' import { ElButton } from 'element-plus'; import App from './App.vue'; +// If you want to use the .scss style file, you need to import the base.scss file +// import 'element-plus/packages/theme-chalk/src/base.scss' const app = createApp(App) app.config.globalProperties.$ELEMENT = option diff --git a/website/docs/zh-CN/quickstart.md b/website/docs/zh-CN/quickstart.md index 7b383237d7..44e3909c00 100644 --- a/website/docs/zh-CN/quickstart.md +++ b/website/docs/zh-CN/quickstart.md @@ -35,6 +35,8 @@ app.mount('#app') #### 按需引入 +**Vue CLI** + 借助 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)，我们可以只引入需要的组件，以达到减小项目体积的目的。 首先，安装 babel-plugin-import: @@ -51,6 +53,31 @@ $ yarn add babel-plugin-import -D 然后，将 babel.config.js 修改为： +- 引入 `.scss` 样式 + +:::warning +请确保已经安装了 `sass` 和 `sass-loader` 依赖并将 `element-plus/packages/theme-chalk/src/base.scss` 文件在入口文件中引入 +::: + +```js +module.exports = { + plugins: [ + [ + "import", + { + libraryName: 'element-plus', + customStyleName: (name) => { + name = name.slice(3) + return `element-plus/packages/theme-chalk/src/${name}.scss`; + }, + }, + ], + ], +}; +``` + +- 引入 `.css` 样式 + ```js module.exports = { plugins: [ @@ -59,8 +86,6 @@ module.exports = { { libraryName: 'element-plus', customStyleName: (name) => { - // 由于 customStyleName 在配置中被声明的原因，`style: true` 会被直接忽略掉， - // 如果你需要使用 scss 源文件，把文件结尾的扩展名从 `.css` 替换成 `.scss` 就可以了 return `element-plus/lib/theme-chalk/${name}.css`; }, }, @@ -68,6 +93,79 @@ module.exports = { ], }; ``` + +**Vite** + +首先，安装 [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import): + +```bash +$ npm install vite-plugin-style-import -D +``` + +或者 + +```bash +$ yarn add vite-plugin-style-import -D +``` + +然后，将 vite.config.js 修改为： + +- 引入 `.scss` 样式 + +:::warning +请确保已经安装了 `sass` 依赖并将 `element-plus/packages/theme-chalk/src/base.scss` 文件在入口文件中引入 +::: + +```js +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' +import styleImport from 'vite-plugin-style-import' + +export default defineConfig({ + plugins: [ + vue(), + styleImport({ + libs: [{ + libraryName: 'element-plus', + resolveStyle: (name) => { + name = name.splice(3) + return `element-plus/packages/theme-chalk/src/${name}.scss`; + }, + resolveComponent: (name) => { + return `element-plus/lib/${name}`; + }, + }] + }) + ] +}) +``` + +- 引入 `.css` 样式 + +```js +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' +import styleImport from 'vite-plugin-style-import' + +export default defineConfig({ + plugins: [ + vue(), + styleImport({ + libs: [ + { + libraryName: 'element-plus', + resolveStyle: (name) => { + return `element-plus/lib/theme-chalk/${name}.css`; + }, + resolveComponent: (name) => { + return `element-plus/lib/${name}`; + }, + } + ] + }) + ] +}) +``` 接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容： @@ -75,6 +173,8 @@ module.exports = { import { createApp } from 'vue' import { ElButton, ElSelect } from 'element-plus'; import App from './App.vue'; +// 如果要使用.scss样式文件，则需要引入base.scss文件 +// import 'element-plus/packages/theme-chalk/src/base.scss' const app = createApp(App) app.component(ElButton.name, ElButton); @@ -93,6 +193,9 @@ app.mount('#app') ```javascript import { createApp } from 'vue' import App from './App.vue'; +// 如果要使用.scss样式文件，则需要引入base.scss文件 +// import 'element-plus/packages/theme-chalk/src/base.scss' + import { ElAlert, ElAside, @@ -300,6 +403,8 @@ app.use(ElementPlus, { size: 'small', zIndex: 3000 }); import { createApp } from 'vue' import { ElButton } from 'element-plus'; import App from './App.vue'; +// 如果要使用.scss样式文件，则需要引入base.scss文件 +// import 'element-plus/packages/theme-chalk/src/base.scss' const app = createApp(App) app.config.globalProperties.$ELEMENT = option