chore: update veui, refine getting-started
This commit is contained in:
parent
4244bcc684
commit
52d9082d55
@ -33,11 +33,13 @@ module.exports = {
|
|||||||
|
|
||||||
Read more about `babel-plugin-veui` [here](/getting-started/babel-plugin-veui).
|
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
|
```js
|
||||||
|
const veuiLoaderOptions = require('veui-theme-dls/veui-loader-options')
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
css: {
|
css: {
|
||||||
loaderOptions: {
|
loaderOptions: {
|
||||||
@ -56,21 +58,7 @@ module.exports = {
|
|||||||
.pre()
|
.pre()
|
||||||
.use('veui-loader')
|
.use('veui-loader')
|
||||||
.loader('veui-loader')
|
.loader('veui-loader')
|
||||||
.tap(() => {
|
.tap(() => veuiLoaderOptions)
|
||||||
return {
|
|
||||||
modules: [
|
|
||||||
{
|
|
||||||
package: 'veui-theme-dls',
|
|
||||||
fileName: '{module}.less'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
package: 'veui-theme-dls',
|
|
||||||
fileName: '{module}.js',
|
|
||||||
transform: false
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
@ -78,9 +66,9 @@ module.exports = {
|
|||||||
To learn more details of configuring `veui-loader`, read its documentation [here](/getting-started/veui-loader).
|
To learn more details of configuring `veui-loader`, read its documentation [here](/getting-started/veui-loader).
|
||||||
|
|
||||||
+++Why all these configs?
|
+++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.
|
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
|
```js
|
||||||
import 'veui-theme-dls/common.less'
|
import 'veui-theme-dls/common.less'
|
||||||
import 'focus-visible'
|
|
||||||
```
|
```
|
||||||
|
@ -33,11 +33,13 @@ module.exports = {
|
|||||||
|
|
||||||
关于 `babel-plugin-veui` 的更详细信息请移步[这里](/getting-started/babel-plugin-veui)。
|
关于 `babel-plugin-veui` 的更详细信息请移步[这里](/getting-started/babel-plugin-veui)。
|
||||||
|
|
||||||
### webpack Loader
|
### Vue CLI 配置
|
||||||
|
|
||||||
综上,我们需要在项目根目录下的 `vue.config.js` 中进行如下配置
|
对于需要引入默认主题包 `veui-theme-dls` 的项目,我们需要在项目根目录下的 `vue.config.js` 中进行如下配置:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
|
const veuiLoaderOptions = require('veui-theme-dls/veui-loader-options')
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
css: {
|
css: {
|
||||||
loaderOptions: {
|
loaderOptions: {
|
||||||
@ -56,21 +58,7 @@ module.exports = {
|
|||||||
.pre()
|
.pre()
|
||||||
.use('veui-loader')
|
.use('veui-loader')
|
||||||
.loader('veui-loader')
|
.loader('veui-loader')
|
||||||
.tap(() => {
|
.tap(() => veuiLoaderOptions)
|
||||||
return {
|
|
||||||
modules: [
|
|
||||||
{
|
|
||||||
package: 'veui-theme-dls',
|
|
||||||
fileName: '{module}.less'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
package: 'veui-theme-dls',
|
|
||||||
fileName: '{module}.js',
|
|
||||||
transform: false
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
@ -78,9 +66,9 @@ module.exports = {
|
|||||||
想了解配置 `veui-loader` 的更多细节,请移步[这里](/getting-started/veui-loader)。
|
想了解配置 `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 及其依赖与项目一起打包的策略,需要手动指定相关的依赖包进行转译。
|
另外,由于我们采用将 VEUI 及其依赖与项目一起打包的策略,需要手动指定相关的依赖包进行转译。
|
||||||
+++
|
+++
|
||||||
@ -94,5 +82,4 @@ VEUI 采取了样式主题与组件代码分离的开发、发布方式。组件
|
|||||||
|
|
||||||
```js
|
```js
|
||||||
import 'veui-theme-dls/common.less'
|
import 'veui-theme-dls/common.less'
|
||||||
import 'focus-visible'
|
|
||||||
```
|
```
|
||||||
|
26
package-lock.json
generated
26
package-lock.json
generated
@ -3979,9 +3979,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"babel-plugin-veui": {
|
"babel-plugin-veui": {
|
||||||
"version": "2.4.1",
|
"version": "2.4.2",
|
||||||
"resolved": "https://registry.npmjs.org/babel-plugin-veui/-/babel-plugin-veui-2.4.1.tgz",
|
"resolved": "https://registry.npmjs.org/babel-plugin-veui/-/babel-plugin-veui-2.4.2.tgz",
|
||||||
"integrity": "sha512-hFE2iIycoM3IVIo/7CnKmus6CRBR/OAQMlOq4CS46IpV4I2hV8dT6rKnwEEg1a4h25JWfPtHrTxh+coh9fJolA==",
|
"integrity": "sha512-zqdghQW23topfI4rc9To/lb0btRAea7zy+f2FTZ8dymNWHwvKQlQn/YBoXsJWq6XZQNpqEKDjsf51MA7Ta3DIg==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"babel-runtime": {
|
"babel-runtime": {
|
||||||
@ -16610,9 +16610,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"veui-loader": {
|
"veui-loader": {
|
||||||
"version": "2.4.1",
|
"version": "2.4.2",
|
||||||
"resolved": "https://registry.npmjs.org/veui-loader/-/veui-loader-2.4.1.tgz",
|
"resolved": "https://registry.npmjs.org/veui-loader/-/veui-loader-2.4.2.tgz",
|
||||||
"integrity": "sha512-pTMSIjYjCjVYKn8l22k0tlU0plkgj1D6lIghSLT28y4FwZCxIlNmSADunQ6YWJr34sJS/aRHR6DkRJeTwmEKLg==",
|
"integrity": "sha512-GfrhGRTvHdehNxooLnMfdlPTLlWpp1y83rykzvuiPU/tGeg45f21c9vUfwObFPrVEJQuiU7gWSfxMIYFSr+QJQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"loader-utils": "^2.0.0",
|
"loader-utils": "^2.0.0",
|
||||||
@ -16702,9 +16702,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"veui-theme-dls": {
|
"veui-theme-dls": {
|
||||||
"version": "2.4.1",
|
"version": "2.4.2",
|
||||||
"resolved": "https://registry.npmjs.org/veui-theme-dls/-/veui-theme-dls-2.4.1.tgz",
|
"resolved": "https://registry.npmjs.org/veui-theme-dls/-/veui-theme-dls-2.4.2.tgz",
|
||||||
"integrity": "sha512-Qf/RLZWO5wFFojc+C+xjDyhqYS0r+RIIja1x/M5SQjmocNN9TCFkq0CnBIXRCa16xREF1XNsXnqZEaGT4JQZDQ==",
|
"integrity": "sha512-GkcVVubsg64TSQGbcedrffVfx0TPsqUOmhKpEQxLsOKrvMVle4LkRZuYFKszelMDE+LjsahR07xhjHL2l/kvVg==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"classlist-polyfill": "^1.2.0",
|
"classlist-polyfill": "^1.2.0",
|
||||||
@ -16712,7 +16712,7 @@
|
|||||||
"focus-visible": "^4.1.0",
|
"focus-visible": "^4.1.0",
|
||||||
"less-plugin-dls": "^5.1.0",
|
"less-plugin-dls": "^5.1.0",
|
||||||
"less-plugin-est": "^3.0.0",
|
"less-plugin-est": "^3.0.0",
|
||||||
"veui-theme-dls-icons": "^2.4.1"
|
"veui-theme-dls-icons": "^2.4.2"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"dls-icons-vue": {
|
"dls-icons-vue": {
|
||||||
@ -16727,9 +16727,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"veui-theme-dls-icons": {
|
"veui-theme-dls-icons": {
|
||||||
"version": "2.4.1",
|
"version": "2.4.2",
|
||||||
"resolved": "https://registry.npmjs.org/veui-theme-dls-icons/-/veui-theme-dls-icons-2.4.1.tgz",
|
"resolved": "https://registry.npmjs.org/veui-theme-dls-icons/-/veui-theme-dls-icons-2.4.2.tgz",
|
||||||
"integrity": "sha512-eM/TCMuAtrIxVa6rWgVOrtsLsCZvR291Asks8uVte5zzDN8Ne63zrnn7uxosRzE6CGuuCigR0ujwFgOYvNGHRQ==",
|
"integrity": "sha512-iEGrgRHc46B3Jf2wUZHsgc+2JurELiasluwOo3S45ytyd4m+bmZevsazAD3yJRTbTs+ahSYguX+ugoe2gBhe6w==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"dls-icons-vue": "^2.3.0"
|
"dls-icons-vue": "^2.3.0"
|
||||||
|
@ -25,7 +25,7 @@
|
|||||||
"@stackblitz/sdk": "^1.5.2",
|
"@stackblitz/sdk": "^1.5.2",
|
||||||
"babel-eslint": "^10.1.0",
|
"babel-eslint": "^10.1.0",
|
||||||
"babel-plugin-lodash": "^3.3.4",
|
"babel-plugin-lodash": "^3.3.4",
|
||||||
"babel-plugin-veui": "^2.4.1",
|
"babel-plugin-veui": "^2.4.2",
|
||||||
"cheerio": "^1.0.0-rc.10",
|
"cheerio": "^1.0.0-rc.10",
|
||||||
"dls-graphics": "^1.0.0-alpha.3",
|
"dls-graphics": "^1.0.0-alpha.3",
|
||||||
"dls-icons-vue": "^0.14.0",
|
"dls-icons-vue": "^0.14.0",
|
||||||
@ -84,9 +84,9 @@
|
|||||||
"unist-util-remove": "^1.0.1",
|
"unist-util-remove": "^1.0.1",
|
||||||
"unist-util-visit": "^1.4.0",
|
"unist-util-visit": "^1.4.0",
|
||||||
"veui": "^2.4.1",
|
"veui": "^2.4.1",
|
||||||
"veui-loader": "^2.4.1",
|
"veui-loader": "^2.4.2",
|
||||||
"veui-theme-dls": "^2.4.1",
|
"veui-theme-dls": "^2.4.2",
|
||||||
"veui-theme-dls-icons": "^2.4.1",
|
"veui-theme-dls-icons": "^2.4.2",
|
||||||
"vue-awesome": "^4.5.0",
|
"vue-awesome": "^4.5.0",
|
||||||
"vue-i18n": "^8.16.0",
|
"vue-i18n": "^8.16.0",
|
||||||
"vue-live": "^1.17.2",
|
"vue-live": "^1.17.2",
|
||||||
|
Loading…
Reference in New Issue
Block a user