vue开发使用工具(如何使用Vue原生组件编译应用程序主题)

Kendo UI致力于新的开发,来满足不断变化的需求Kendo UI for Vue使用旨在提高性能和丰富用户体验的Vue组件,帮助开发人员构建下一代应用程序它是为Vue技术框架提供可用的Kendo UI组件,以便更快地构建更好的Vue应用程序,下面我们就来聊聊关于vue开发使用工具?接下来我们就一起去了解一下吧!

vue开发使用工具(如何使用Vue原生组件编译应用程序主题)

vue开发使用工具

Kendo UI致力于新的开发,来满足不断变化的需求。Kendo UI for Vue使用旨在提高性能和丰富用户体验的Vue组件,帮助开发人员构建下一代应用程序。它是为Vue技术框架提供可用的Kendo UI组件,以便更快地构建更好的Vue应用程序。

所有Kendo主题都是用sass写的,使用scss语法,您需要一个sass编译器来编译它们,同时我们还支持node-sass和dart-sass。

由于主题的复杂性,我们依靠 postcss、autoprefixer 和 postcss-calc 来正确编译它们。

Kendo UI官方最新版免费下载试用,历史版本下载,在线文档和帮助文件下载-慧都网

使用 gulp

以下设置将从源 ./sass/kendo-theme.scss 生成 ./dist/kendo-theme.css。

请注意:

  • 我们包含/dist/all.scss,这是主题的扁平化单文件版本,用于更快的编译。
  • 将为市场份额至少为 10% 的浏览器生成前缀。
  • sassOptions.precision 设置在使用 dart-sass 时无效。
  • 确保安装 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') } } } ] } ] } };

已知的问题

以下是Kendo主题的常见问题列表以及如何解决这些问题。

编译很慢

从主题的第一天开始,我们希望主题“自动”加载给定组件所需的样式。换句话说,如果您只需要网格,主题将加载所有输入组件,因为它们是编辑功能所必需的,这会导致多个重复的子导入,因此在编译时会影响性能。

如果您需要整个主题,可以导入/dist/all.scss,来替代导入/scss/all.scss。这是主题的单文件版本,编译速度要快得多。

如果你需要导入多个组件,可以看看我们的主题任务和 sassimporter 助手,它实现了一种缓存机制来避免重复的文件处理。

无效的嵌套计算表达式

由于主题的复杂性,嵌套或其他无效的计算表达式可能会出现在生成的 css 中。 要处理这个问题,请在您的 gulp 或 webpack 工作流程中使用 postcss-calc。

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页