Kendo UI致力于新的开发来满足不断变化的需求。Kendo UI for Vue使用旨在提高性能和丰富用户体验的Vue组件帮助开发人员构建下一代应用程序。它是为Vue技术框架提供可用的Kendo UI组件以便更快地构建更好的Vue应用程序。每个​​​​​​​Kendo UI for Vue使主题包都包含主题的源文件作为构建过程的一部分您可以修改源文件并重新构建主题。例如可以更改主题颜色、删除未使用组件的 CSS 或使用特定主题颜色来设置应用程序的样式主题源文件位于主题包的 scss 文件夹中。要使用主题变量构建自定义主题请应用以下任一方法推荐使用应用程序的构建过程——这种方法简化了对新组件和主题包版本的升级。使用主题的构建过程——这种方法要求您在每次更新主题包时构建主题。要获得主题的视觉预览请使用ThemeBuilder应用程序它有一个用户友好的界面您可以在其中预览所有组件并尝试多种颜色样本。使用应用程序的构建过程要使用Node Sass它使用 LibSass请运行npm install node-sass --save命令。要使用Dart Sass请运行npm install sass --save命令。// App.scss import ~progress/kendo-theme-default/dist/all.scss;通过此设置您可以直接在应用程序中自定义主题变量例如您可以使用以下行将默认原色从橙色更改为粉红色$primary: #ff69b4; import ~progress/kendo-theme-default/dist/all.scss;dist/all文件为主题中可用的所有组件添加样式要缩小生成的CSS大小请仅导入您在应用程序中使用的组件源代码您可以在 scss/ 文件夹中找到它们。// Import only the PanelBar and Grid styles using Node Sass import ~progress/kendo-theme-default/scss/panelbar/_index.scss; import ~progress/kendo-theme-default/scss/grid/_index.scss; // or using Dart Sass import ~progress/kendo-theme-default/scss/panelbar/; import ~progress/kendo-theme-default/scss/grid/;使用主题的构建过程虽然每个​​​​​​​Kendo UI for Vue主题都有一个专用的NPM包例如progress/kendo-theme-default但所有主题的源代码都位于 kendo-themes 存储库中存储库包含将主题源编译为 CSS 的构建任务。要自定义主题修改主题的源代码并使用构建任务为您的应用程序生成 CSS 文件。这种方法避免了在编译 SCSS 时设置构建配置的需要但可能更难维护因为每次更新主题时都必须重复该过程。注意为了改进开发过程每个主题的先前独立 GitHub 存储库被合并到单个 kendo-themes 存储库中并且各个存储库被存档。使用颜色自定义主题样本是一组自定义主题外观的变量。每个样本都放置在一个单独的文件中一个主题可能包含多个颜色板。颜色板对于创建多个持久的主题变体很有用。.css 输出文件可以跨项目共享无需进一步处理。要创建样本复制kendo-themes GitHub 存储库。安装node-gyp。使用 npm install npx lerna bootstrap 安装所有主题的依赖项。将工作目录切换到 packages/THEME_NAME。在 scss/swatches 文件夹中创建一个 SWATCH_NAME.scss 样本文件。要为主题构建颜色板请键入 npm run sass:swatches 或 npm run dart:swatches。在您的项目中包含已编译的CSS样本文件还可以在 dist/SWATCH_NAME.css 下找到它。例如在 Material 主题中创建一个带有以下行的蓝色-粉色-深色颜色板// Variables. $primary-palette-name: blue; $secondary-palette-name: pink; $theme-type: dark; // Import the theme file for the components you use. import ../panelbar/_index.scss; import ../grid/_index.scss; // Alternatively, include all components. import ../all.scss;对于 Default 和 Bootstrap 主题样本应如下所示// Variables. $primary: blue; $secondary: pink; // Import the theme file for the components you use. import ../panelbar/_index.scss; import ../grid/_index.scss; // Alternatively, include all components. import ../all.scss;自定义源代码通过修改主题源代码创建自定义主题复制kendo-themes GitHub 存储库。使用 npm install npx lerna bootstrap 安装所有主题的依赖项。在 packages/THEME_NAME/scss/_variables.scss 文件中自定义主题变量。使用 npm run sass 或 npm run dart 命令构建主题以在 packages/THEME_NAME/dist/all.css 文件中创建主题的自定义版本。构建完成后使用编译后的 CSS。创建自定义组件包您可能希望在 CSS 输出中省略某些组件的样式要仅包含您需要的样式复制 kendo-themes GitHub存储库。使用 npm install npx lerna bootstrap 安装所有主题的依赖项。将工作目录切换到 packages/THEME_NAME。在 scss 文件夹中创建 CUSTOM_THEME.scss 文件 例如使用以下行创建 custom.scss 文件// Import the theme file for the components you use. import ../panelbar/_index.scss; import ../grid/_index.scss;要构建文件请导航到主题文件夹并运行 gulp sass --file scss/CUSTOM_THEME.scss。在项目中包含编译后的 CSS 文件您可以在 dist/CUSTOM_THEME.css 下找到它。​​​​​​​