首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    如何构建UI组件设计规范?

    通过本文,你将学习到 Uber ,Pinterest ,Shopify 和 Airbnb 等知名网站如何利用组件构建统一的UI / UX 设计规范 。 ​...那么,如何才能构建有效的UI组件设计规范呢?以下有几个方面需要引起注意。 保持视觉和功能一致性 ​ ​ 功能一致性使你的产品更具可预测性。...鉴于目前的行业情况, UI组件还可以作为用户体验组件 ,将功能和视觉一致性结合起来。...组件是用于UI设计和开发的一种很好的办法,使用较少的可重用的组件,更好地实现一致性。 ​ ​...但是,如何才能真正地创建基于组件的设计规范,使设计人员和开发人员可以利用该规范进行协作? 在创建基于组件的设计规范前,你必须了解它是什么。

    47210

    如何基于 WebComponents 封装 UI 组件

    如何基于 WebComponents 封装 UI 组件库 https://www.zoo.team/article/web-components 前言 作为一名前端攻城狮,相信大家也都在关注着前端的一些新技术...="(e) => { data = e.detail }"> 封装我们自己的组件库 设计目录结构 第一步:要有一个优雅的组价库我们首先要设计一个优雅的目录结构,设计目录结构如下 . └── cai-ui.../components/xxx/xxx.js' 按需导入我们只需要导入组件的 js 文件即可如 import 'cai-ui/components/Button/index.js' 自定义配置主题 支持主题色可配置...import '//cai-ui'; <!...我总结了以下几点: 更加偏向于 UI 层面,与现在数据驱动不太符,和现在的组件库能力上相比功能会比较弱,使用场景相对单一。

    1.4K20

    如何优雅的设置UI组件的属性?

    UI库提供了很多组件组件又带有很多属性,有一些常用属性我们可以记住并且手撸,但是有些不常用的属性,或者需要设置多个属性,这样的情况下写起来就麻烦了,有时候还要打开帮助文档看看属性是怎么设定的,需要设置什么样的属性值...演示地址 https://naturefw.gitee.io/nf-rollup-ui-controller/ 源码 https://gitee.com/naturefw/nf-rollup-ui-controller...js的对象和模板代码,支持 json 格式; 大部分属性值都可以通过鼠标点击的方式生成,少数的需要手敲; 工作量比较大、精力有限,目前仅支持 element-plus 的部分组件,理论上可以支持任何UI...小类原则 按照UI库提供的组件 按照功能,“原子”级别 按照值的类型,比如数组和非数组。...https://naturefw.gitee.io/nf-rollup-ui-controller/ 生成模板和代码 属性设置完毕之后,可以生成template模板代码,以及js里定义的对象,支持json

    1.7K10

    如何优雅而快速的安装Laravel

    坑爹的安装过程 具体是怎么回事呢,那天突然想要研究一下Laravel,然后便开始了我的百度之旅。网上说用Composer来安装,结果处处踩坑,三个小时都没能安装好,现在把我总结出来的方法教给大家。...安装环境 Windows 10 X64 小皮面版(原PHPStudy) 一颗聪明的大脑 安装php环境以及Composer php -v composer -V 更换Composer国内源 composer...所以说我们来搞个黑科技,给composer加加速 这样composer就可以多线程下载了 安装Laravel composer global require laravel/installer composer...create-project laravel/laravel app 大功告成 如无特殊说明《如何优雅而快速的安装Laravel》为博主MoLeft原创,转载请注明原文链接为:https://moleft.cn

    27020

    如何正确使用 Composer 安装 Laravel 扩展包

    正确使用 Composer 安装 Laravel 扩展包: 简单解释composer install如有 composer.lock 文件,直接安装,否则从 composer.json 安装最新扩展包和依赖...并更新到最新;composer require new/package添加安装 new/package, 可以指定版本,如: composer require new/package ~2.5....,如:git; 流程二:项目协作者安装现有项目 克隆项目后,根目录下直接运行 composer install 从 composer.lock 中安装 指定版本 的扩展包以及其依赖; 此流程适用于生产环境代码的部署...关于扩展包的安装方法 那么,准备添加一个扩展包,install, update, require 三个命令都可以用来安装扩展包,选择哪一个才是正确的呢?...上面的概念不论对新手或者老手来说,都比较混淆,主要记住这个概念: 原有项目新添加扩展的,都使用 composer require new/package 这种方式来安装。完。

    1.5K10

    国际大厂如何创建UI组件设计规范?看这里

    通过本文,你将学习到 Uber ,Pinterest ,Shopify 和 Airbnb 等知名网站如何利用组件构建统一的UI / UX 设计规范 。 ?...那么,如何才能构建有效的UI组件设计规范呢?以下有几个方面需要引起注意。 1、保持视觉和功能一致性 ? 功能一致性使你的产品更具可预测性。...鉴于目前的行业情况, UI组件还可以作为用户体验组件 ,将功能和视觉一致性结合起来。...组件是用于UI设计和开发的一种很好的办法,使用较少的可重用的组件,更好地实现一致性。 ?...但是,如何才能真正地创建基于组件的设计规范,使设计人员和开发人员可以利用该规范进行协作? 在创建基于组件的设计规范前,你必须了解它是什么。

    1.4K30

    猫头虎分享:Element UI & Element Plus组件安装及使用

    这篇技术博客旨在为广大开发者,无论是刚入门的小白还是经验丰富的大佬,提供一个关于如何安装和使用Element UI与Element Plus的全面指南。...本文将深入讨论这两个库的安装和使用,帮助你快速构建美观且响应式的Vue.js应用界面。 正文 安装Element UI Element UI是基于Vue 2.x版本的UI组件库。...安装Element UI非常简单,只需以下几步: 确保你已经安装了Vue.js。 Element UI是为Vue.js设计的,因此在开始之前,请确保你的项目中已经安装了Vue.js。...小结 本文介绍了如何安装和基本使用Element UI和Element Plus两大Vue UI组件库。通过这些指南,你应该能够快速开始使用这些库来构建你的Vue应用。...Element UI Element Plus Vue版本 2.x 3.x 安装命令 npm i element-ui npm i element-plus 全局引入 支持 支持 单个组件引入 支持

    44910

    如何用 Karma,Jasmine,Webpack 测试 UI 组件系列(一)配置篇

    如何用 Karma,Jasmine,Webpack 测试 UI 组件系列 (一) 配置篇为什么要测试 从个人经验来看,测试是防止软件缺陷的最好方法。...本文介绍如何使用 Karma,Jasmine,Webpack 编写单元测试代码。...详细代码请点击 https://github.com/sunyue1992/KaramJasmineWebpack 安装 Karma 下面给出一份karma.config.js的配置模板,大部分按照默认值配置就可以了...Webpack 和 Babel 的安装和配置 Babel和Webpack的根据使用到的ECMAScript新特性决定是否配置,我的配置如下 Jasmine 的断言库的引入 编写测试用例 因为我司在生成中还在使用...Angular 1.X 的版本,所以测试用例的编写也以此为例,需要安装angular angular-mocks。

    2.1K150

    Discourse 如何安装一个主题组件或者主题组件

    如何在 discourse 中安装一个主题(Theme)或者主题组件(Theme Component) ---- 希望导入一个新的主题或者主题组件,请在你的网站下访问地址: www.yoursite.com.../admin/customize/themes 或者你也可以通过你的 UI 进行访问,访问路径为: Admin > Customize > Themes 然后单击在这里进行安装: 在弹出的界面中,你应该可以看到下面的内容...: 你可以在上面的界面中安装已经预定义的内容,你也可以从你的本地磁盘上上传,更多的时候我们可能会希望从 Git 上进行安装。...通过这种开放的方式能够更加容易让你使用和安装。 例如,你希望安装 https://github.com/discourse/discourse-matomo-analytics.git 这个组件。...然后单击下一步进行安装。 在下一个界面中,你将会看到下面的界面,在这里选择应用的主题,然后进行保存。 通过上面的过程,你已经为你的主题安装了一个新的主题或者主题组件了。

    73620

    基于 Vue 测试套件引入 Mocha + Expect 测试 Vue 组件

    你可以参照Vue 官方文档通过 NPM 安装相应的依赖包,不过这里为了方便后端程序员快速入门,我们绕过 Webpack 的繁琐配置,直接基于 Laravel Mix 引入 Vue 测试套件和 Mocha...开始之前,先初始化一个新的 Laravel 项目 component-test,并通过 laravel/ui 扩展包预置 Vue 依赖包和示例组件laravel new component-test...cd component-test composer require laravel/ui php artisan ui vue npm install 二、引入 Mocha 测试框架 在 component-test...运行测试命令 接下来,我们运行 npm run test 执行一次测试,由于还没有编写任何测试用例,所以测试通过: 三、测试 Vue 单文件组件 最后,我们编写一个测试用例来测试 laravel/ui...当然,这只是一个最基本的测试用例,还不是标准的 BDD 风格测试代码(Given-When-Then),下篇教程,学院君将给大家演示如何遵循 BDD 风格基于 TDD 模式从头开始开发一个 Vue 单文件组件

    1.4K40
    领券