chore: update veui, refine getting-started

2022-01-07 15:04:33 +08:00 · 2022-01-07 15:04:33 +08:00 · 52d9082d55
commit 52d9082d55
parent 4244bcc684
4 changed files with 31 additions and 57 deletions
--- a/one/docs/en-US/getting-started/index.md
+++ b/one/docs/en-US/getting-started/index.md
@ -33,11 +33,13 @@ module.exports = {

 Read more about `babel-plugin-veui` [here](/getting-started/babel-plugin-veui).

-### webpack Loader
+### Vue CLI configs

-In general, you need to configure `vue.config.js` in the root directory as follows:
+For projects that need to import the default theme package `veui-theme-dls`, we need to configure the `vue.config.js` as follows:

 ```js
+const veuiLoaderOptions = require('veui-theme-dls/veui-loader-options')
+
 module.exports = {
  css: {
    loaderOptions: {
@ -56,21 +58,7 @@ module.exports = {
      .pre()
      .use('veui-loader')
      .loader('veui-loader')
-      .tap(() => {
-        return {
-          modules: [
-            {
-              package: 'veui-theme-dls',
-              fileName: '{module}.less'
-            },
-            {
-              package: 'veui-theme-dls',
-              fileName: '{module}.js',
-              transform: false
-            }
-          ]
-        }
-      })
+      .tap(() => veuiLoaderOptions)
  }
 }
 ```
@ -78,9 +66,9 @@ module.exports = {
 To learn more details of configuring `veui-loader`, read its documentation [here](/getting-started/veui-loader).

 +++Why all these configs?
-VEUI's style code is separate from its components. The component code doesn't explicitly depend on style code so `veui-loader` is needed to specify and inject style package into the components.
+VEUI takes an approach to develop and ship component logic and themes separatedly. The component code has no explicit depency on style code so you need to use `veui-loader` to configure the theme package you want to use.

-If you want to use `veui-theme-dls`, the default style package, you need import and configure `veui-loader` for webpack. As Less 3+ no longer enable JavaScript evaluation by default, which `veui-theme-dls` relies on, you need to manually enable this option.
+As Less 3+ does not enable inline JavaScript evaluation by default - which `veui-theme-dls` relies on, we need to enable it manually.

 We intend to transpile and build VEUI and its dependencies along with the application code itself so you need to add the related packages into the transpilation process.
 +++
@ -93,5 +81,4 @@ Import from JavaScript:

 ```js
 import 'veui-theme-dls/common.less'
-import 'focus-visible'
 ```
--- a/one/docs/getting-started/index.md
+++ b/one/docs/getting-started/index.md
@ -33,11 +33,13 @@ module.exports = {

 关于 `babel-plugin-veui` 的更详细信息请移步[这里](/getting-started/babel-plugin-veui)。

-### webpack Loader
+### Vue CLI 配置

-综上，我们需要在项目根目录下的 `vue.config.js` 中进行如下配置
+对于需要引入默认主题包 `veui-theme-dls` 的项目，我们需要在项目根目录下的 `vue.config.js` 中进行如下配置：

 ```js
+const veuiLoaderOptions = require('veui-theme-dls/veui-loader-options')
+
 module.exports = {
  css: {
    loaderOptions: {
@ -56,21 +58,7 @@ module.exports = {
      .pre()
      .use('veui-loader')
      .loader('veui-loader')
-      .tap(() => {
-        return {
-          modules: [
-            {
-              package: 'veui-theme-dls',
-              fileName: '{module}.less'
-            },
-            {
-              package: 'veui-theme-dls',
-              fileName: '{module}.js',
-              transform: false
-            }
-          ]
-        }
-      })
+      .tap(() => veuiLoaderOptions)
  }
 }
 ```
@ -78,9 +66,9 @@ module.exports = {
 想了解配置 `veui-loader` 的更多细节，请移步[这里](/getting-started/veui-loader)。

 +++为什么要配置这些选项？
-VEUI 采取了样式主题与组件代码分离的开发、发布方式。组件代码对样式代码没有显式的依赖，故以源码方式引入时，需要使用 `veui-loader` 配置关联的主题包。
+VEUI 采取了样式主题与组件代码分离的开发、发布方式。组件代码对样式代码没有显式的依赖，所以需要使用 `veui-loader` 配置关联的主题包。

-如需使用默认的样式包 `veui-theme-dls`，我们还需要确保在 webpack 配置中引入 `veui-loader`。同时由于 Less 3+ 不再默认开启内联 JavaScript 解析，而 `veui-theme-dls` 依赖了这一功能，所以我们需要手动开启配置项。
+同时由于 Less 3+ 不再默认开启内联 JavaScript 解析，而 `veui-theme-dls` 依赖了这一功能，所以我们需要手动开启配置项。

 另外，由于我们采用将 VEUI 及其依赖与项目一起打包的策略，需要手动指定相关的依赖包进行转译。
 +++
@ -94,5 +82,4 @@ VEUI 采取了样式主题与组件代码分离的开发、发布方式。组件

 ```js
 import 'veui-theme-dls/common.less'
-import 'focus-visible'
 ```
--- a/package-lock.json
+++ b/package-lock.json
@ -3979,9 +3979,9 @@
      }
    },
    "babel-plugin-veui": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/babel-plugin-veui/-/babel-plugin-veui-2.4.1.tgz",
-      "integrity": "sha512-hFE2iIycoM3IVIo/7CnKmus6CRBR/OAQMlOq4CS46IpV4I2hV8dT6rKnwEEg1a4h25JWfPtHrTxh+coh9fJolA==",
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/babel-plugin-veui/-/babel-plugin-veui-2.4.2.tgz",
+      "integrity": "sha512-zqdghQW23topfI4rc9To/lb0btRAea7zy+f2FTZ8dymNWHwvKQlQn/YBoXsJWq6XZQNpqEKDjsf51MA7Ta3DIg==",
      "dev": true
    },
    "babel-runtime": {
@ -16610,9 +16610,9 @@
      }
    },
    "veui-loader": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/veui-loader/-/veui-loader-2.4.1.tgz",
-      "integrity": "sha512-pTMSIjYjCjVYKn8l22k0tlU0plkgj1D6lIghSLT28y4FwZCxIlNmSADunQ6YWJr34sJS/aRHR6DkRJeTwmEKLg==",
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/veui-loader/-/veui-loader-2.4.2.tgz",
+      "integrity": "sha512-GfrhGRTvHdehNxooLnMfdlPTLlWpp1y83rykzvuiPU/tGeg45f21c9vUfwObFPrVEJQuiU7gWSfxMIYFSr+QJQ==",
      "dev": true,
      "requires": {
        "loader-utils": "^2.0.0",
@ -16702,9 +16702,9 @@
      }
    },
    "veui-theme-dls": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/veui-theme-dls/-/veui-theme-dls-2.4.1.tgz",
-      "integrity": "sha512-Qf/RLZWO5wFFojc+C+xjDyhqYS0r+RIIja1x/M5SQjmocNN9TCFkq0CnBIXRCa16xREF1XNsXnqZEaGT4JQZDQ==",
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/veui-theme-dls/-/veui-theme-dls-2.4.2.tgz",
+      "integrity": "sha512-GkcVVubsg64TSQGbcedrffVfx0TPsqUOmhKpEQxLsOKrvMVle4LkRZuYFKszelMDE+LjsahR07xhjHL2l/kvVg==",
      "dev": true,
      "requires": {
        "classlist-polyfill": "^1.2.0",
@ -16712,7 +16712,7 @@
        "focus-visible": "^4.1.0",
        "less-plugin-dls": "^5.1.0",
        "less-plugin-est": "^3.0.0",
-        "veui-theme-dls-icons": "^2.4.1"
+        "veui-theme-dls-icons": "^2.4.2"
      },
      "dependencies": {
        "dls-icons-vue": {
@ -16727,9 +16727,9 @@
      }
    },
    "veui-theme-dls-icons": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/veui-theme-dls-icons/-/veui-theme-dls-icons-2.4.1.tgz",
-      "integrity": "sha512-eM/TCMuAtrIxVa6rWgVOrtsLsCZvR291Asks8uVte5zzDN8Ne63zrnn7uxosRzE6CGuuCigR0ujwFgOYvNGHRQ==",
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/veui-theme-dls-icons/-/veui-theme-dls-icons-2.4.2.tgz",
+      "integrity": "sha512-iEGrgRHc46B3Jf2wUZHsgc+2JurELiasluwOo3S45ytyd4m+bmZevsazAD3yJRTbTs+ahSYguX+ugoe2gBhe6w==",
      "dev": true,
      "requires": {
        "dls-icons-vue": "^2.3.0"
--- a/package.json
+++ b/package.json
@ -25,7 +25,7 @@
    "@stackblitz/sdk": "^1.5.2",
    "babel-eslint": "^10.1.0",
    "babel-plugin-lodash": "^3.3.4",
-    "babel-plugin-veui": "^2.4.1",
+    "babel-plugin-veui": "^2.4.2",
    "cheerio": "^1.0.0-rc.10",
    "dls-graphics": "^1.0.0-alpha.3",
    "dls-icons-vue": "^0.14.0",
@ -84,9 +84,9 @@
    "unist-util-remove": "^1.0.1",
    "unist-util-visit": "^1.4.0",
    "veui": "^2.4.1",
-    "veui-loader": "^2.4.1",
-    "veui-theme-dls": "^2.4.1",
-    "veui-theme-dls-icons": "^2.4.1",
+    "veui-loader": "^2.4.2",
+    "veui-theme-dls": "^2.4.2",
+    "veui-theme-dls-icons": "^2.4.2",
    "vue-awesome": "^4.5.0",
    "vue-i18n": "^8.16.0",
    "vue-live": "^1.17.2",