Kendo UI致力于新的開(kāi)發(fā)，來(lái)滿足不斷變化的需求。Kendo UI for Vue使用旨在提高性能和豐富用戶體驗(yàn)的Vue組件，幫助開(kāi)發(fā)人員構(gòu)建下一代應(yīng)用程序。它是為Vue技術(shù)框架提供可用的Kendo UI組件，以便更快地構(gòu)建更好的Vue應(yīng)用程序。

所有Kendo主題都是用sass寫的，使用scss語(yǔ)法，您需要一個(gè)sass編譯器來(lái)編譯它們，同時(shí)我們還支持node-sass和dart-sass。

由于主題的復(fù)雜性，我們依靠 postcss、autoprefixer 和 postcss-calc 來(lái)正確編譯它們。

Kendo UI最新正式版下載

使用 gulp

以下設(shè)置將從源 ./sass/kendo-theme.scss 生成 ./dist/kendo-theme.css。

請(qǐng)注意：

• 我們包含/dist/all.scss，這是主題的扁平化單文件版本，用于更快的編譯。
• 將為市場(chǎng)份額至少為 10% 的瀏覽器生成前綴。
• sassOptions.precision 設(shè)置在使用 dart-sass 時(shí)無(wú)效。
• 確保安裝 gulp-sass、node-sass、dart-sass、gulp-postcss、autoprefixer、postcss-calc 和 fiber。

// assuming ./sass/kendo-theme.scss
@import "../node_modules/@progress/kendo-theme-default/dist/all.scss";

const gulp = require('gulp');
const sass = require('gulp-sass');
const postcss = require("gulp-postcss");
const autoprefixer = require("autoprefixer");
const calc = require("postcss-calc");
const Fiber = require('fibers');

// Use node sass
sass.compiler = require('node-sass');
// Use dart-sass
// sass.compiler = require('dart-sass');

const postcssPlugins = [
calc({
precision: 10
}),
autoprefixer({
overrideBrowserslist: [ '> 10%' ]
})
];
const sassOptions = {
precision: 10,
outputStyle: 'expanded',
fiber: Fiber
};
gulp.task('sass', function () {
return gulp.src('./sass/**/*.scss')
.pipe(sass.sync(sassOptions).on('error', sass.logError))
.pipe(postcss(postcssPlugins))
.pipe(gulp.dest('./dist'));
});

使用 webpack

確保安裝了 style-loader、sass-loader、node-sass、dart-sass、postcss-loader、autoprefixer、postcss-calc 和 fiber。

// assuming ./sass/kendo-theme.scss
@import "~@progress/kendo-theme-default/dist/all.scss";

module.exports = {
module: {
rules: [
{
test: /.scss$/i,
use: [
// Creates `style` nodes from JS strings
'style-loader',
// Translates CSS into CommonJS
'css-loader',
// PostCSS
{
loader: 'postcss-loader',
options: {
precision: 10,
plugins: [
require('autoprefixer')(),
require('postcss-calc')()
]
}
},
// Compiles Sass to CSS
{
loader: 'sass-loader',
options: {
implementation: require('node-sass'),
// implementation: require('dart-sass'),
sassOptions: {
precision: 10,
// fiber: require('fibers')
}
}
}
]
}
]
}
};

已知的問(wèn)題

以下是Kendo主題的常見(jiàn)問(wèn)題列表以及如何解決這些問(wèn)題。

編譯很慢

從主題的第一天開(kāi)始，我們希望主題“自動(dòng)”加載給定組件所需的樣式。換句話說(shuō)，如果您只需要網(wǎng)格，主題將加載所有輸入組件，因?yàn)樗?們是編輯功能所必需的，這會(huì)導(dǎo)致多個(gè)重復(fù)的子導(dǎo)入，因此在編譯時(shí)會(huì)影響性能。

如果您需要整個(gè)主題，可以導(dǎo)入/dist/all.scss，來(lái)替代導(dǎo)入/scss/all.scss。這是主題的單文件版本，編譯速度要快得多。

如果你需要導(dǎo)入多個(gè)組件，可以看看我們的主題任務(wù)和 sassimporter 助手，它實(shí)現(xiàn)了一種緩存機(jī)制來(lái)避免重復(fù)的文件處理。

無(wú)效的嵌套計(jì)算表達(dá)式

由于主題的復(fù)雜性，嵌套或其他無(wú)效的計(jì)算表達(dá)式可能會(huì)出現(xiàn)在生成的 css 中。 要處理這個(gè)問(wèn)題，請(qǐng)?jiān)谀?gulp 或 webpack 工作流程中使用 postcss-calc。

Telerik_KendoUI產(chǎn)品技術(shù)交流群：726377843    歡迎一起進(jìn)群討論